使用vm.$nextTick更新视图

使用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;
			});
		}
	});
},

这样就可以将视图更新展示了：