[Vuejs]-Trying to update the DOM

by

0👍

This is the final version (these 4 lines took me all day lol):

in computed:
    appNotes(){
        let reverse=this.notes.slice().reverse()
        return this.check? reverse:this.notes
    }

I removed everything else. It turns out it was simple as that.

0👍

I would suggest for you to take out the @click=”handleClick” and create a watch property for check. So after you load the asynchronous request you can set the check to false and then it will render your list of notes.

<template>
<div class="form-check">
  <input type="checkbox" id="appNotes" class="form-check-input" v-model="check">
  <label for="appNotes" class="form-check-label" >Older Notes First</label>
  <!-- {{check? this.appNotes=[...this.notes].reverse():this.appNotes=this.notes}} -->
  <!-- This surprisingly reverses the notes and produces s warnig about inifinite loop -->
</div>
<section class="row text-center text-lg-left " v-if="notes.length">
  <NoteThumb 
  v-for="note in appNotes" 
  :key="note.id" 
  :note="note">
    <h4>{{ note.title }}</h4>
    <p>{{ note.date }}</p>
    <p>{{ note.id }}</p>
  </NoteThumb>
</section>
</template>
<script>
    export default {
        data() {
            return {
                appNotes: {},
                check:false
            };
        },
        methods:
        {
        passNotes(){
            this.$set(this.appNotes, this.notes, null)
            this.appNotes=null
            this.$forceUpdate()
            //here you can just set check to false and it will update the appNotes
            this.check = false
         },
        async created (){
            await this.$store.dispatch('notes/getNotes')
            await this.passNotes()
        }
        },
        watch: {
            check: function () {
                this.check? this.appNotes=[...this.notes].reverse():this.appNotes=this.notes
            }
        }

    }
</script>

Leave a comment