Question

运行此命令时，控制台日志会给我更新的数组xyz，但是当我在DOM {{xyz}}中打印它时，它不会更新。有什么原因吗？

data() {
   return {
      xyz: []
   }
},
methods: {

    getDataFromXML() {

        Array.prototype.forEach.call(this.allxml, path => {

                fs.readFile(xmlLoc, (err, data) => {

                    if (err) throw err;

                    var XmlNode = new DOMParser().parseFromString(data.toString(), 'text/xml')
                    this.$set(this.xyz,path,XmlNode)

                })  

        })

        console.log(this.xyz)

    }
}

Answer 1

您使用set的方式错误。您正在向数组本身添加属性。

这是正确的。我在这里How to set dynamic object values with Vue/Vuex?

解释了此$ set

在这里，我创建一个示例，其中一个按钮用set操作数组。（您在示例中所做的事情）另一个将元素添加到数组（https://codepen.io/reijnemans/pen/ZEEzJpL?editors=1011）

    <div id="app">

   <h1>Content of array {{ data }}</h1>
   <h1>Array property alpa <span style="color: red">{{ data.alpha }}<span></h1>

    <v-btn @click="set1">manipulate array with $set</v-btn>
    <v-btn @click="set2">add to array with push</v-btn>
</div>

JS

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      data: ['test']
    }
  } ,
  methods: {
    set1() {
      this.$set(this.data, 'alpha', 'xyz')

    },
    set2() {
      this.data.push('xyz')
    }
  }
})

this。$ set更新数组不起作用（VueJS）

1 个答案: