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

我有一个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/>

导出默认值{
数据（）{
返回{
信息：[]
}
},
方法：{
submitMessage（）{
//提交表单数据
this.submitFormData（{url:'/messages/new'，formData}）
。然后（（消息）=>{
this.messages.push（消息）
})
},
}
}
}

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

注意这是一个子组件，而不是vue实例（$forceUpdate不工作）

您应该执行以下操作：

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

导出默认值{
数据（）{
返回{
信息：[]
}
},
方法：{
submitMessage（）{
//提交表单数据
this.submitFormData（{url:'/messages/new'，formData}）
。然后（（消息）=>{
this.messages.push（消息）
})
}
}

vue最好的部分之一是，它动态更新gui元素（组件），您的错误是

方法：{}

在

数据（）{}

中

我希望它能有所帮助。

您应该这样做：

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

导出默认值{
数据（）{
返回{
信息：[]
}
},
方法：{
submitMessage（）{
//提交表单数据
this.submitFormData（{url:'/messages/new'，formData}）
。然后（（消息）=>{
this.messages.push（消息）
})
}
}

vue最好的部分之一是，它动态更新gui元素（组件），您的错误是

方法：{}

在

数据（）{}

中

---

我希望它能有所帮助。

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

我已经试着按原样添加代码，除了在承诺的回报中包含这一点之外，它似乎工作正常

Vue.component（'test'）{
模板：`
消息
{{{msg}

`
，数据（）{
返回{
信息：[]
}
},
方法：{
submitMessage（消息）{
this.messages.push（消息）
}
}
});
var vm=新的Vue({
el:“#应用程序”
})；

---

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

我已经试着按原样添加代码，除了在承诺的回报中包含这一点之外，它似乎工作正常

Vue.component（'test'）{
模板：`
消息
{{{msg}

`
，数据（）{
返回{
信息：[]
}
},
方法：{
submitMessage（消息）{
this.messages.push（消息）
}
}
});
var vm=新的Vue({
el:“#应用程序”
})；

模板代码在哪里？您可以添加完整的组件代码吗？我认为您的代码中还有另一个问题，因为Vuejs将在组件发生数据更改时自动重新加载组件。添加

console.log（this.messages）

将新消息推送到该数组后。它应该包含新添加的消息。问题可能出现在未显示在此处的代码的其他部分。我使用模板@Mjhyour

方法更新了问题。对象不应出现在
数据
方法中。当前
方法中的
return
语句中ta
方法不是有效的javascript。模板代码在哪里？您可以添加完整的组件代码吗？我认为您的代码中还有另一个问题，因为Vuejs将在数据更改时自动重新加载组件stry adding
console.log（this.messages）
将新消息推送到该数组后。它应该包含新添加的消息。问题可能出现在未显示在此处的代码的其他部分。我使用模板@Mjhyour
方法更新了问题。对象不应出现在
数据
方法中。当前
方法中的
return
语句中ta
方法不是有效的javascript。谢谢@LakiGeri的回答。但问题不在于，这只是一个输入错误。我已经成功地更新了数组，我可以在vue开发工具中检查它，正如我上面所说，但是视图没有重新渲染tanks@LakiGeri以获得你的答案。但问题不在于，这只是一个输入错误。I h阵列已成功更新，我可以在vue devtools中进行检查，如上所述，但视图没有重新渲染Anx以获得答案，但结果是一样的..我忘记说我正在使用vue路由器加载此组件..它可能是问题的根源，但答案是一样的..我忘了说我正在加载I正在使用vue路由器禁用此组件。这可能是问题的根源