Trying to update the DOM - dom

Question

I obviously fell into the Vue.js caveat, I suppose. Anyway:
I am rendering a v-if list of items (notes) and I want to reverse it when the checkbox is checked.
I get the data from store (Axios get) and assign it immediatelly to a different property (appNotes) so I can manipulate it later. I can't get the notes to update on the first render. They do when I check the box. Here's the relevant code:
<div class="form-check">
<input type="checkbox" id="appNotes" class="form-check-input" #click="handleClick"
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>
data(){
return {
appNotes: {},
check:false
},
handleClick(){
this.check? this.appNotes=[...this.notes].reverse():this.appNotes=this.notes
},
passNotes(){
this.$set(this.appNotes, this.notes, null)
this.appNotes=null
this.$forceUpdate()
},
async created (){
await this.$store.dispatch('notes/getNotes')
await this.passNotes()
}
https://codesandbox.io/s/2jqr60xmjj
it's not a working link, but you can see the full code at the 'Home' component

Answer 1

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>

Answer 2

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.