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

问题描述：

我有一个数据数组的vue.js子组件调用messages。在数组中插入新元素时如何更新DOM。如何在数据数组插入新元素时更新子组件？

这里是我的代码的简化片断：使用VUE devtools我可以看到的消息阵列更新

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

，但我不能GE的DOM根据其更新。

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

哪里模板代码？ – Mjh

你可以添加完整的组件代码吗？我认为在你的代码中还有另一个问题，因为如果数据发生变化，Vuejs会自动重新渲染组件 – imcvampire

尝试在将新消息推送到此数组后添加'console.log（this.messages）'。它应该包含新添加的消息。问题可能出现在这里的代码的不同部分。 – Edwardo

答

你应该这样做：

<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，如上所述，但视图不会重新渲染 –

不客气。 :) – LakiGeri

答

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

我试着按原样添加代码，并承诺回报中有这样的例外，它似乎工作正常。

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>` 
 
\t ,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加载这个组件..它可能是问题的根源 –

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

相关推荐