数据数组插入新元素时如何更新子组件？答案

【问题标题】：How to update a child component when data array inserting new elements?数据数组插入新元素时如何更新子组件？
【发布时间】：2018-03-11 07:03:56
【问题描述】：

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

这是我的代码的简化 sn-p：

<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 不起作用）

【问题讨论】：

模板代码在哪里？
可以添加完整的组件代码吗？我认为您的代码中还有另一个问题，因为如果数据发生变化，Vuejs 会自动重新渲染组件
在向该数组推送新消息后尝试添加console.log( this.messages )。它应该包含新添加的消息。问题可能出在此处未显示的代码的不同部分。
我用模板@Mjh 更新了问题
您的 methods 对象不应在您的 data 方法中。目前您在data 方法中的return 语句不是有效的javascript。

标签： javascript arrays vue.js vuejs2 vue-component

【解决方案1】：

我看不到代码有任何问题，这可能与应用程序的另一部分有关。

我已经尝试按原样添加代码，除了在 promise 的返回中添加此代码，它似乎工作正常。

https://jsfiddle.net/nyaao6ec/

Vue.component('test', {
  template: `<div>
  <button @click="submitMessage('hi')">MESSAGE</button>
  <p v-for="(msg, i) in messages" :key="i" >{{msg}}
  </p>
</div>`
	,data () {
    return {
      messages: []
    }
  },
  methods: {
    submitMessage (message) {
      this.messages.push(message)
    }
  }
});

var vm = new Vue({
  el: '#app'
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
<div id="app"><test></test></div>

您可以尝试将this.messages.push(message) 移出承诺（并添加一些预定义的字符串）？

【讨论】：

thanx 的答案，但那是一样的.. 我忘了说我正在使用 vue-router 加载这个组件.. 它可能是问题的根源

【解决方案2】：

你应该这样做：

<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() {} 内部。

希望对你有帮助。

【讨论】：

感谢@LakiGeri 的回答.. 但问题不在于，这只是一个错字.. 我已经成功更新了数组，我可以在上面说的 vue devtools 中检查它，但是视图不会重新渲染