当我想在 setter "avoid mutating prop error" 节目中更改道具时

Question

在我将数组作为 prop 传递并尝试更改 setter 中的 prop 后（在计算中）它向我显示“避免改变 prop”错误。这是我的代码：

export default {
    props: {
        links: {
            type: Array,
            default: () => {
                return [];
            },
            required: true
        },
    },
    data() {
        return {
          data: {}
        };
    },
    computed: {
        links_data: {
            get() {
                return this.links
            },
            set(value) {
                this.$emit('update:links', {...this.links = value})
            }
        }
    },
    methods: {
        // Add new link
        addNewLink() {
          axios.post(api, this.data)
              .then(res => { this.links_data = res.data.links })
              .catch(error => {console.log(error)})
        },
        // Post delete
        deleteLink() {
            axios.delete(api)
            .then(res => { this.links_data = res.data.links })
            .catch(error => {console.log(error)})
        },
    }
};

有人知道我为什么会收到这个错误吗？

Answer 1

你在 setter,

中做错了

 this.$emit('update:links', {...this.links = value})

您在左侧使用了 this.links 来分配 value，我的意思是您是直接尝试将 value 分配给 this.links 所以这是突变错误的原因。
你正试图将对象传递给 this.links 而不是数组，尽管 links props 类型是数组.

所以尝试解决以上两个问题，我认为它会很好。

只需像下面那样替换 setter $emit，

 this.$emit('update:links', [...value])

或

this.$emit('update:links', value)

希望它能解决您的问题。

当我想在 setter "avoid mutating prop error" 节目中更改道具时

When i want to change prop in the setter "avoid mutating prop error" shows

vue.js

computed-properties

vue-props