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

Вы используете установить неправильный путь. Вы добавляете свойство в сам массив.

Правильно для этого. $ Set Я объяснил здесь Как установить значения динамического объекта с помощью 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')
    }
  }
})