I'm a Vue beginner and I am attempting to showcase a list of "notes" that should update once a button is clicked (I have manually set the value to add for now). However, after adding a new item to the array, the changes are not reflected on the user interface. I am using Vue3, and the unique :key attribute is correctly implemented. My other "widgets" that retrieved data from an API response worked fine, so I wonder if this issue is related to handling asynchronous responses when dealing with APIs compared to simply appending/pushing to the data array?
<template>
<Widget class="notes" :style="style" @load="showNotes()">
<h3>Notes</h3>
<p v-for="item in data" :key="item.id">{{ item.note }}</p>
<button @click="addNote()">Add</button>
</Widget>
</template>
<script>
import Widget from "./Widget.vue";;
export default {
name: "Notes",
props: {
widgetWidth: Number,
},
computed: {
style() {
return "max-width: " + this.widgetWidth + "px";
},
},
data() {
return {
notes: undefined,
};
},
methods: {
addNote() {
var x;
if (!this.data) {
this.data = [];
x = 0;
} else {
x = this.data.length;
console.log(x);
}
this.data.push({ id: x, note: "another" });
console.log(this.data);
},
showNotes() {
this.data = [{ id: 0, note: "init" }];
},
},
beforeMount() {
this.showNotes();
},
components: { Widget },
};
</script>
<style scoped>
.notes {
min-width: 100px;
word-wrap: break-word;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.notes > * {
flex-grow: 1;
}
</style>