vue.set()使用:

120 阅读1分钟

不用vue.$set()之前 直接用索引去修改

不支持 修改123 或者整个对象:{} {}

[1,2,3,4]/[{},{},{},{}]

能修改索引里面的具体值:

[{},{},{}]

<template>
	<view class="content">
		
		<view class="text-area">
			
		<!-- 	<view class="arr" v-for="(item,index) in names" :key="index">
				{{item}}
			</view>
			<button type="default" size="mini" @click="reviseArr" >修改数组</button> -->
			
			<view class="obj" v-for="(items,index) in list" :key="index" >
				{{items.name}}
			</view>
			<button type="default"  @click="reviseObj">修改对象</button>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				names:['lucy','baby','lala'],
				list:[
					{
						name:'晓明'
					},
					{
						name:'阿叔'
					},
					{
						name:'小土豆'
					}
				]
			}
		},
		onLoad() {

		},
		methods: {
			reviseObj(){
				
				//数组对象 倒是可以修改
				this.list[1].name = '傻傻的勇气' 
				
				// this.list[1] = { name:'噜啦噜啦'}//不支持
				
				// 对象第一个就是key 要加'' 为字符
				this.$set(this.list[1],'name','大番薯')
			},
			reviseArr(){
				// this.names[0] = '大番薯'   //vue检测不到的哦
				// 数组第二个参数就是索引
				this.$set(this.names,0,'大番薯')
			}
		}
	}
</script>

<style>
	.arr{
		width: 100%;
		margin-top: 20rpx;
		border-bottom: 5rpx solid green;
	}
	.obj{
		width: 100%;
		margin-top: 20rpx;
		border-bottom: 5rpx solid red;
	}
</style>