报错unexpected side effect in computed properties

最新推荐文章于 2023-12-22 13:58:08 发布

丹哥不是哥

最新推荐文章于 2023-12-22 13:58:08 发布

阅读量2.6w

点赞数 8

文章标签： vue报错

vue踩坑笔记专栏收录该内容

10 篇文章

订阅专栏

本文探讨了在Vue.js中如何正确使用计算属性避免意外的副作用。通过一个具体示例，详细解释了不当使用计算属性修改数据属性的问题，并提供了使用watch监听计算属性变化的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

https://stackoverflow.com/questions/53757107/handling-unexpected-side-effect-in-computed-properties-vuejs
以上为参考链接
修改前：

<template>
    <select v-model="selected">
    <option v-for="key in getkeys" v-bind:key="key"> {{ key }}</option
    </select>
</template>

data(){
    return{
    selected: '',
    allKeys: [],
    originalKeys: [],  //e.g. ["ALPHA_MIKE]
    getTranslation: {} //e.g. {"ALPHA_MIKE": "ALPHA MIKE"}
    }
},
computed: {
    getkeys(){
        let tableHeaders = [];
        for( var i=0; i<this.originalKeys.length; i++){
            let translation = this.getTranslation[this.originalKeys[i]];
            tableHeaders.push(translation);
        }
        this.selected = tableHeaders[0]; //unexpected side effect here
        this.allKeys = tableHeaders; //unexpected side effect here.
        return this.allKeys;
    }
}

不能再computed中改变页面变量的值，如果需要改变，请使用watch，修改后的代码如下：

computed: {
    getkeys(){
        let tableHeaders = [];
        for( var i=0; i<this.originalKeys.length; i++){
            let translation = this.getTranslation[this.originalKeys[i]];
            tableHeaders.push(translation);
        }
        return tableHeaders;
    }
},
watch: {
  getkeys: {
    deep: true,
    handler: function (newVal) {
      this.selected = newVal[0]
      this.allKeys = newVal
    }
  }
}