使用vm.$nextTick更新视图
选择一个文件后,想要将文件名及文件路径显示出来,直接使用this.filePath修改不生效,vue中有vm.$nextTick( [callback] )
方法可以更新视图数据:
可参考官方文档:https://vuejs.bootcss.com/api/#vm-nextTick
chooseFile: function() {
// 选择文件
uni.chooseFile({
count: 1,
success: function(res) {
this.$nextTick(function() {
this.filePath = res.tempFilePaths[0] + res.tempFiles[0].name;
});
}
});
}
添加后报错,是因为我们现在的this指向问题不对,修改this指向
方法一:变量替代
chooseFile: function() {
// 选择文件
let vm = this; // 变量替代
uni.chooseFile({
count: 1,
success: function(res) {
vm.$nextTick(function() {
vm.filePath = res.tempFilePaths[0] + res.tempFiles[0].name;
});
}
});
},
方法二:箭头函数
chooseFile: function() {
// 选择文件
uni.chooseFile({
count: 1,
success: res => { // 改为箭头函数
this.$nextTick(function() {
this.filePath = res.tempFilePaths[0] + res.tempFiles[0].name;
});
}
});
},
这样就可以将视图更新展示了: