Vue Computed属性get、set不生效?
vue computed的get、set不生效,会是什么问题呢?
export default {
props: {
endPoint: {
type: Object
}
},
computed: {
nativeEndPoint: {
get() {
console.log('-----获取--', this.endPoint)
return {
...this.endPoint
};
},
set(endPoint) {
console.log('----------更新')
}
}
}
}
<input v-model="nativeEndPoint.width"/>
<input v-model="nativeEndPoint.height/>
传入endPoint值:width: 100, height: 100}
如上图所示,当输入框修改值时,无法触发set()函数,实在奇怪,有没有大佬懂的
回复
1个回答
test
2024-06-24
<input v-model="endPointWidth"/>
<input v-model="endPointHeight"/>
export default {
props: {
endPoint: {
type: Object
}
},
computed: {
endPointWidth: {
get() {
return this.endPoint.width;
},
set(newWidth) {
this.$emit('update:endPoint', { ...this.endPoint, width: newWidth });
}
},
endPointHeight: {
get() {
return this.endPoint.height;
},
set(newHeight) {
this.$emit('update:endPoint', { ...this.endPoint, height: newHeight });
}
}
}
}
属性多的话:
export default {
props: {
endPoint: {
type: Object
}
},
computed: {
...generateComputedProperties(['width', 'height', 'depth', 'color'])
}
}
function generateComputedProperties(props) {
let computed = {};
props.forEach(prop => {
computed[`endPoint${capitalizeFirstLetter(prop)}`] = {
get() {
return this.endPoint[prop];
},
set(value) {
this.$set(this.endPoint, prop, value);
}
};
});
return computed;
}
function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
回复
适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容