Vue Computed属性get、set不生效?

作者站长头像
站长
· 阅读数 7

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个回答
avatar
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);
}
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容