报错unexpected side effect in computed properties

报错unexpected side effect in computed properties

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;

}

}


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

不能再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
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19