Обработка неожиданного побочного эффекта в вычисляемых свойствах - VueJS

Question

В следующем коде я пытаюсь использовать объект getTranslation для сопоставления значений, присутствующих в массиве originalKeys, и помещать значения в новый массив allKeys.

Но ESLint даетмне эта ошибка, Unexpected side effect in "getkeys" computed property.

Я пытался перенести функцию getkeys на методы, но я думаю, что нет смысла каждый раз вызывать метод для выполнения перевода.Как я могу решить эту проблему?

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

Answer 1

Я бы посоветовал вам переместить массив allKeys в вычисляемый и избавиться от ненужных tableHeaders и getKeys:

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

data(){
    return{
    selected: '',
    originalKeys: [],  //e.g. ["ALPHA_MIKE]
    getTranslation: {} //e.g. {"ALPHA_MIKE": "ALPHA MIKE"}
    }
},
computed: {
    allkeys() {
        return this.originalKeys.map(key => this.getTranslation[key])
    }
}

Я не уверен, что вам нужно назначить this.selected = tableHeaders[0], так какпервый вариант будет выбран по умолчанию автоматически.

Answer 2

ESLint показывает эту ошибку, потому что вы изменяете исходные данные в вычисляемом свойстве.Рекомендуется возвращать новые ссылки или данные из вычисляемого свойства. Следуйте по этой ссылке для подробного объяснения.https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/no-side-effects-in-computed-properties.md

Answer 3

Как и мой комментарий выше, вы не должны редактировать другие данные в свойстве 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
    }
  }
}