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

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

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

正确的 this.$set 我在这里解释How to set dynamic object values with Vue/Vuex?

在这里，我创建了一个示例，一个按钮操作带有 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')
    }
  }
})