Vue Computed属性get、set不生效？

Z时代
2024-02-29
分类：IT

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()函数，实在奇怪，有没有大佬懂的

回答：

<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);
}