Vue.set的使用

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue.set的使用相关的知识,希望对你有一定的参考价值。

参考技术A 这里我定义了一个列表数据,我将通过三个不同的按钮来控制列表数据。

调用方法:Vue.set( target, key, value )

target:要更改的数据源(可以是对象或者数组)

key:要更改的具体数据

value :重新赋的值

<!DOCTYPE html><html><headlang="en"><metacharset="UTF-8"><title></title></head><body><divid="app2"><pv-for="item in items":key=" item.id ">item.message</p><buttonclass="btn"@click="btn2Click()">动态赋值</button>
<buttonclass="btn"@click="btn3Click()">为data新增属性</button></div><scriptsrc="../../dist/vue.min.js"></script><script>var vm2=new Vue( el:"#app2", data: items:[ message:"Test one",id:"1", message:"Test two",id:"2", message:"Test three",id:"3" ] , methods: btn2Click:function() Vue.set(this.items,0,message:"Change Test",id:'10') , btn3Click:function() var itemLen=this.items.length; Vue.set(this.items,itemLen,message:"Test add attr",id:itemLen); );</script></body></html>

vue+this.$set+Vue.set的使用


1、html代码

<el-row>
	<el-col>
		<span>1:</span>
		<el-button type="primary" @click="clickBtn(1)">基本数据类型-赋值</el-button>
		<span v-text="value"></span>
	</el-col>
	<el-col style="margin-top: 0.7em;">
		<span>2:</span>
		<el-button type="primary" @click="clickBtn(2)">对象类型-赋值</el-button>
		<span>objectValue.value</span>
	</el-col>
	<el-col style="margin-top: 0.7em;">
		<span>3:</span>
		<el-button type="primary" @click="clickBtn(3)">对象纯数组类型-赋值</el-button>
		<span>objectArrayValue.value[0]</span>
	</el-col>
	<el-col style="margin-top: 0.7em;">
		<span>4:</span>
		<el-button type="primary" @click="clickBtn(4)">对象数组对象类型-赋值</el-button>
		<span>objectArrayObjectValue.value[0].value</span>
	</el-col>
	<el-col style="margin-top: 0.7em;">
		<span>5:</span>
		<el-button type="primary" @click="clickBtn(5)">纯数组类型-赋值</el-button>
		<span>arrayValue[0]</span>
	</el-col>
	<el-col style="margin-top: 0.7em;">
		<span>6:</span>
		<el-button type="primary" @click="clickBtn(6)">数组对象类型-赋值</el-button>
		<span>arrayObjectValue[0].value</span>
	</el-col>
	<el-col style="margin-top: 0.7em;">
		<span>7:</span>
		<el-button type="primary" @click="clickBtn(7)">数组对象纯数组类型-赋值</el-button>
		<span>arrayObjectArrayValue[0].value[0]</span>
	</el-col>
</el-row>

2、JavaScript代码

clickBtn(type) 
	if (type == 1) 
		this.value = type; // 更新成功
		// this.$set(this, 'value', type); // 更新成功
		// Vue.set(this, 'value', type); // 更新成功
	 else if (type == 2) 
		this.objectValue.value = 2; // 更新成功
		// this.$set(this.objectValue, 'value', type); // 更新成功
		// Vue.set(this.objectValue, 'value', type); // 更新成功
	 else if (type == 3) 
		// this.objectArrayValue.value[0] = type; // 更新失败
		this.$set(this.objectArrayValue.value, 0, type); // 更新成功
		// Vue.set(this.objectArrayValue.value, 0, type); // 更新成功
	 else if (type == 4) 
		this.objectArrayObjectValue.value[0].value = type; // 更新成功
		// this.$set(this.objectArrayObjectValue.value[0], 'value', type); // 更新成功
		// Vue.set(this.objectArrayObjectValue.value[0], 'value', type); // 更新成功
	 else if (type == 5) 
		// this.arrayValue[0] = type; // 更新失败
		this.$set(this.arrayValue, 0, type); // 更新成功
		// Vue.set(this.arrayValue, 0, type); // 更新成功
	 else if (type == 6) 
		this.arrayObjectValue[0].value = type; // 更新成功
		// this.$set(this.arrayObjectValue[0], 'value', type); // 更新成功
		// Vue.set(this.arrayObjectValue[0], 'value', type); // 更新成功
	 else if (type == 7) 
		// this.arrayObjectArrayValue[0].value[0] = type; // 更新失败
		// this.$set(this.arrayObjectArrayValue[0].value, 0, type); // 更新成功
		Vue.set(this.arrayObjectArrayValue[0].value, 0, type); // 更新成功
	


3、完成代码

gitee(码云) - mj01分支 - vue_set 文件夹


4、相关链接

CSDN-vue中的$set和Vue.set方法

以上是关于Vue.set的使用的主要内容,如果未能解决你的问题,请参考以下文章

vue 中 this.$set的使用

Vue中的set方法,改变对象和数组的内容

Vue-给对象新增属性(使用Vue.$set())

【vue】为啥要使用Vue.$set(target,key,value)

Vue.set的使用

Vue.set的使用