javascript - 当数据数组插入新元素时如何更新子组件？

Question

我有一个 vue.js 子组件，其中包含一个名为 messages 的数据数组。在数组中插入新元素时如何更新 DOM。

这是我的代码的简化片段:

<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/>

使用 vue devtools 我可以看到消息数组已更新，但我无法根据它更新 DOM。

注意这是一个子组件，而不是 vue 实例($forceUpdate 不起作用)

Answer 1

你应该这样做:

<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>

vue 最好的部分之一是，它动态更新 gui 元素(组件)，您的错误是 methods: {} 位于 data() {}.

希望对您有所帮助。