如何在數據數組插入新元素時更新子組件？

我有一個數據數組的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不工作）

來源

2017-09-29 Abdelaziz Mokhnache

哪裏模板代碼？ – 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() {}之內。

我希望它有幫助。

來源

2017-09-29 12:45:08 LakiGeri

謝謝@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)了承諾（和添加一個定義一些預字符串）？

來源

2017-09-29 23:32:09 Daniel

thanx的答案，但那是相同的..我忘了說，我使用vue-router加載這個組件..它可能是問題的根源 –

如何在數據數組插入新元素時更新子組件？

回答

相關問題