One of my vue.js child components contains a data array named messages. I am looking for a way to refresh the DOM when new elements are inserted into the array.
Below is a simplified version of the code snippet:
<template>
<q-item v-for="(msg, i) in messages" :key="i" >
<!-- q-item is a custom component of quasar framework -->
<!-- some code here related to msg -->
</q-item>
<template/>
<script>
export default {
data () {
return {
messages: []
}
},
methods: {
submitMessage () {
// submit the formData
this.submitFormData({url: '/messages/new', formData})
.then((message) => {
this.messages.push(message)
})
},
}
}
}
<script/>Although I can see that the messages array is updated using vue devtools, the DOM is not reflecting these changes.
Please note that this is a child component and $forceUpdate does not work in this case.