electron 问题:当方法内的回调更改数据时重新呈现vue示例

yizd12fk  于 2022-12-08  发布在  Electron
关注(0)|答案(1)|浏览(166)

我正在开发一个带有electron的应用程序,使用vue.js作为独立的库(没有CLI),当我通过回调vue方法中的electron方法来更改数据时(在v-for上呈现),它会得到一个非常奇怪的重新呈现行为。我展示了一个简化的代码:
第一个
当用户选择音频文件时,div显示路径和每个路径的(索引+ 1)。
首先我不明白的是:在第一次调用addAudioFile()之后,playlistArray的所有' '元素都变为undefined,因此我必须将if语句更改为:

if(this.playlistArray[i] == '' || this.playlistArray[i] == undefined)

为什么它会改变呢?(如果数组中有一个元素是一个真实的字符串,它不会变成未定义的)。但是好吧...
古怪的行为:当playlistArray被更改时,v-for不会重新渲染...但是...如果我浏览开发人员工具,关闭它,然后在我的应用程序中的任何地方单击重新渲染工作(?)。
我使用另一个help方法和一个help变量更改了代码:

...

let vue = new Vue({
  el: '#app',
  data: {
    playlistArray: ['', '', '', '', '']
  },
  methods: {
    addAudioFile() {

      remote.dialog.showOpenDialog({

        ...

      }, (pathArray) => {
         let j = 0;
         let newPlaylistArray = [];

         for(i = 0; i < this.playlistArray.length; i++) {
            if(this.playlist[i] == '' || this.playlistArray[i] == undefined) {
               newPlaylistArray[i] = pathArray[0 + j];
               j++;
            }
            else newPlaylistArray[i] = this.playlistArray[i] || '';
         }
         this.updatePlaylist(newPlaylistArray);
      })
    },

     updatePlaylist(playlist) {
        this.playlistArray = playlist;
     }
  }
})

......现在它工作正常了。为什么?

aydmsdu9

aydmsdu91#

我的猜测是因为React性。正如文件所说:
Vue无法检测阵列的以下变化:

  • 当您直接设定具有索引的项目时,例如

vm.items[indexOfItem] = newValue
来源
要使第一个示例正常工作,可以尝试使用spliceset方法:

for(i = 0; i < this.playlistArray.length; i++) {
  if(this.playlist[i] == '') {
    this.playlistArray.splice(i, 1, pathArray[i + j])
    // or
    this.$set(this.playlistArray, i, pathArray[i + j])
    j++;
  }
}

注意:您使用的是if(this.playlist[i] == '')条件。playlist属性从何而来?您的意思是playlistArray吗?

相关问题