報錯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