1. 程式人生 > >vue 中的set 方法 解決列表渲染的問題

vue 中的set 方法 解決列表渲染的問題

列表渲染中,可能值變了但是頁面沒有響應。

Vue 提供了 set 方法,解決這個問題。

		var app = new Vue({
			el: '#app',
			data:{
				onelist: [{
					id: "010101020304",
					text: "hello"
				},{
					id: "0202020304",
					text: "ok"
				},{
					id: "0303030405",
					text: "yes"
				}
				],
				oneobject: {
					name: "Tom",
					age: 18,
					gender: "male"
				}
			}
		})
	</script>

 

方法一 Vue 的set 方法

物件:通過 Vue.set(app.oneobject,"address","c") 來修改資料並響應

陣列:通過 Vue.set(app.onelist,1,"c") 來修改資料並響應

方法二 Vue 例項的方法

物件:通過 app.$set(app.oneobject,"address","c")

陣列:通過 Vue.set(app.onelist,1,"c") 來修改資料並響應

 

總結,vue 中改變陣列,且響應的三種方式:

改引用,使用push 等變異方法改陣列,vue 中的set 方法

vue 中改變物件,且響應的兩種方式:

改引用,vue 中的set 方法。