一、使用场景
当你给一个数组对象中添加一个新的属性时,需使用$set主动更新视图
如果直接赋值添加你会发现,虽然可以新增属性,但是不会触发视图更新
二、使用方法
方法:this.$set(this.data,‘key’,value)
一共有三个参数
第1个this.data:你想要赋值的对象
第2个‘key’:对象中,新增的属性名
第3个value:对象中,新增的属性名对应的属性值
白话:也就是第2个和第3参数组成一个键值对,放入第1个参数(对象)里
原因是:受 ES5 的限制,Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter,所以属性必须在 data 对象上才能让 Vue.js 转换它,才能让它是响应的。
要处理这种情况,我们可以使用$set()方法,既可以新增属性,又可以触发视图更新。
<template>
<div class="goodsList">
<div class="goodsItem" v-for="(item, index) in goodsList" :key="index">
<p class="title">名称:{{ item.title }}</p>
<p class="subtitle">副标题:{{ item.subtitle }}</p>
<p class="price">价格:{{ item.price }}</p>
</div>
<button @click="addGoodsPrice">点击添加商品价格</button>
</div>
</template>
<script>
export default {
data() {
return {
goodsList: [
{
title: '笔记本A',
subtitle: '轻薄、便携',
},
{
title: '笔记本B',
subtitle: '16G内存、8核',
},
],
}
},
methods: {
// 添加商品列表项的价格
addGoodsPrice() {
this.goodsList.map((item, index) => {
const price = 8098 + index * 100 // 随便定义的价格
// item.price = price // 直接赋值-错误,发现视图未更新
this.$set(item, 'price', price) // 通过$set,赋值-正确视图会更新
})
console.log(this.goodsList)
},
},
}
</script>
三、总结
在项目中,这是一个经常会遇到的坑;
如果发现属性已经增加了,但视图没有渲染,你就要想想是不是要用$set去解决了
你可能感兴趣的文章: