数据相关API
Vue.set === vm.$set
作用:向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。
使用: Vue.set(target, propertyName/index, value) 范例:批量设置商品价格
demo:
<template>
<div>
<p>
<input type="text" v-model="price" />
<button @click="batchupdate()">批量调价</button>
</p>
</div>
</template>
// 模拟异步数据调用
getCourses() {
return new Promise((resolve) => {
setTimeout(() => {
resolve([{ name: "web" }, { name: "web2" }]);
}, 2000);
});
},
// 前端往接口请求的数据中追加新增数据
courseAdd() {
// 1.添加 course到数组
this.courses.push({ name: this.course,price:0 });
// 2.清空数组
this.course = "";
this.show = true;
},
// 批量更新操作(前端新增的数据,默认不会动态更新到DOM)
batchupdate() {
this.courses.forEach((item) => {
// item.price = this.price; //接口请求的数据中,前端新增的数据,不会动态更新
this.$set(item,'price',this.price) //修改后,会动态更新视图数据
});
},
Vue.delete === vm.$delete
删除对象的属性。如果对象是响应式的,确保删除能触发更新视图。
使用方法: Vue.delete(target, propertyName/index)