问题:
编辑时,级联组件绑定数据变化,的dom不进行更新
原因:
引用值类型(对象或数组)动态添加或删除某一个属性值,需要使用this.$set 或者 Object.assign()===不然数据触发不到getter和setter。
(对from直接赋值不会影响dom更新,但是动态添加某一属性会影响)
深入理解响应式:
为data中的 updateForm 对象添加一个属性,需要用到this.
s
e
t
(
删
除
t
h
i
s
.
set(删除this.
set(删除this.delete)
深入理解vue响应式
数据进行初始化时(data中),将property通过object.defineProperty绑定getter和setter,从而进行获取和改变渲染(setter触发会触发watcher)
async created() {
await this.getGoodsCatgoryList()
// this.getGoodsList()
// 编辑的话,获取id信息
if (this.$route.params.id) {
// 获取id商品信息
const storageId = getDAes(this.$route.params.id)
const { data: result } = await getStorageById({ storageId })
// 重新赋值,以前的已经消失不存在了
this.updateForm = result.data
// 获取选择产品下拉框
await this.getGoodsList(this.updateForm.categoryId)
// 下拉框回显
// this.updateForm.selectedGoodsCatgory = [this.updateForm.categoryId]
// this.updateForm.selectedGoodsList = [this.updateForm.prodId]
this.$set(this.updateForm, 'selectedGoodsCatgory', [this.updateForm.categoryId])
this.$set(this.updateForm, 'selectedGoodsList', [this.updateForm.prodId])
console.log(this.updateForm)
// 获取销售价 结算价参数
if (this.updateForm.salePriceType !== 0) {
this.saleRadioInputForm[this.saleRadioInput[this.updateForm.salePriceType]] = this.updateForm.salePriceParam
}
if (this.updateForm.costPriceType !== 0 && this.updateForm.costPriceType !== 1) {
this.costRadioInputForm[this.costRadioInput[this.updateForm.costPriceType]] = this.updateForm.costPriceParam
}
}
},
总结:
data中初始化的数据响应式会影响dom更新,所以dom中凡是使用的数据都要在data中绑定。
如何数据变化dom不更新,说明有对data中对象添加或删除树形 / 数组用索引设置数组项 或 改变长度