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我可以看到messages数组已更新，但我无法根据它更新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() {}内。

我希望它有所帮助。

Answer 2

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

我已经尝试按原样添加代码，除了在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)移出承诺（并添加一些预定义的字符串）？

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

2 个答案: