我正在开发一个带有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;
}
}
})
......现在它工作正常了。为什么?
1条答案
按热度按时间aydmsdu91#
我的猜测是因为React性。正如文件所说:
Vue无法检测阵列的以下变化:
vm.items[indexOfItem] = newValue
来源
要使第一个示例正常工作,可以尝试使用
splice
或set
方法:注意:您使用的是
if(this.playlist[i] == '')
条件。playlist
属性从何而来?您的意思是playlistArray
吗?