"allOptions" 计算中的错误意外副作用 属性 vue/no-side-effects-in-computed-properties

Question

我试图在 Vue js 的 computed 区域中的数组中找到答案的索引，但我收到一个错误，指出发生了一些意外的副作用

代码：-

<script>
import _ from "lodash";

export default {
  name: "QuestionBottom",
  props: {
    currentQuestion: Object,
    nextQuestion: Function,
    increment: Function,
  },
  data() {
    return {
      selectedIndex: null,
      correctIndex: null,
    };
  },
  // watch changes to the props
  watch: {
    currentQuestion() {
      this.selectedIndex = null;
    },
  },

  computed: {
    allOptions() {
      let allOptions = [
        ...this.currentQuestion.incorrect_answers,
        this.currentQuestion.correct_answer,
      ];

      console.log("array that is not shuffled is ", allOptions);
      allOptions = _.shuffle(allOptions);
      console.log("shuffled array is", allOptions);
      console.log("Corect ans is ", this.currentQuestion.correct_answer);

      // here is the error occurring
      this.correctIndex = allOptions.indexOf(
        this.currentQuestion.correct_answer
      );
      return allOptions;
    },
  },

  methods: {
    selectedAns(index) {
      this.selectedIndex = index;
      console.log("Selected answer index", this.selectedIndex);
    },
    submitAnswer() {
      let isCorrect = false;
      if (this.selectedIndex === this.correctIndex) {
        isCorrect = true;
      }

      this.increment(isCorrect);
    },
  },

  mounted() {
    // console.log(this.currentQuestion);
  },
};
</script>

我是 Vue.js 的新手。我不知道在我的数组的计算区域中发生这种意外行为的原因是什么。

Answer 1

Vue 不喜欢在计算的 属性 (allOptions) 中更改数据变量 (correctIndex)。我会把那部分放到一个被监视的方法中。 https://vuejs.org/v2/guide/computed.html#Watchers

computed: {
    allOptions() {
      let allOptions = [
        ...this.currentQuestion.incorrect_answers,
        this.currentQuestion.correct_answer,
      ];

      console.log("array that is not shuffled is ", allOptions);
      allOptions = _.shuffle(allOptions);
      console.log("shuffled array is", allOptions);
      console.log("Corect ans is ", this.currentQuestion.correct_answer);
      return allOptions;
    },

    watch: {
        allOptions() {
            this.correctIndex = allOptions.indexOf(this.currentQuestion.correct_answer);
        }
    }

这样 allOptions 保持计算状态，并且会做它的事情（仅此而已）- 但会被监视。每次更改时，correctIndex 都会相应更新。