Блог

в настоящее время я изучаю vue.js с YouTube. Существует некоторая логика, позволяющая определить, какой класс должен иметь html-элемент.

В руководстве логика добавлена в methods , которая работает нормально, но если я добавлю логику в computed вместо этого. Я не могу использовать это как значение attrubute

Есть ли обходной путь? Просто почему-то мне кажется, что я должен добавить это в, computed поэтому я попробовал это, и ошибка показывает, [Vue warn]: Error in render: "TypeError: Cannot read property 'answerItemClass' of undefined" что я понимаю ошибку

Возможно, я ошибаюсь, помещая это в computed просто как-то это всплыло, и интересно, что, если в будущем я действительно захочу вставить что-то computed вместо methods , тогда будет ли простое решение?

пример html ниже

     <b-list-group-item
      v-for="(answer, index) in answers"
      v-html="answer"
      :key="index"
      :class="this.answerItemClass(index)"
      :disabled="answered"
      @click="selectAnswer(index)"
    >
    </b-list-group-item>
  

скрипт, добавленный в computed вместо methods

   computed: {
    answerItemClass(index) {
      let result = ''

      if (this.selectedIndex === index) result = 'selected';
      if ((this.answered) amp;amp;
        (this.correctAnswerIndex === index)
      ) result = 'correct';
      if ((this.answered) amp;amp;
        (this.selectedIndex === index) amp;amp;
        (this.correctAnswerIndex !== index)
      ) result = 'incorrect';

      return resu<
    },
  }
  

Заранее благодарю вас за любые предложения и рекомендации.

Это мое личное предложение, чтобы обеспечить лучший способ достижения цели.

 var Main = {
  data() {
    return {
      answers: [{
        answer: 'A',
        selected: false,
        correct: false
      }, {
        answer: 'B',
        selected: false,
        correct: true
      }, {
        answer: 'C',
        selected: false,
        correct: false
      }]
    };
  },
  methods: {
    selectAnswer(index) {
      this.answers = this.answers.map((v, i) => {
        if (i === index) {
          v.selected = !v.selected
        } else {
          v.selected = false
        }
        return v
      })
    }
  }
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')  

 ul>li {
  cursor: pointer;
}

ul>li.selected {
  background-color: #eee;
}

ul>li.correct {
  background-color: green;
}

ul>li.incorrect {
  background-color: red;
}  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

<div id="app">
  <ul>
    <li v-for="(answer, index) in answers" :key="index" :class="{'selected': answer.selected, 'correct': answer.selectedamp;amp;answer.correct,'incorrect': answer.selectedamp;amp;!answer.correct}" @click="selectAnswer(index)">{{answer.answer}}</li>
  </ul>
</div>  

Поместите состояние ответа в объект массива, а затем определите, какой стиль отображать, принимая значение состояния при обходе объекта.

Если вы хотите передать подобный аргумент, я рекомендую продолжать использовать методы. Вычисляемые методы кэшируются и будут обновляться только с изменениями зависимостей. Методы будут выполняться при каждом их вызове. Хотя вы могли бы передать аргумент в вычисляемый, обычно это делается для манипулирования существующими данными в каком-либо состоянии и их возврата.

Это описано в документации Vue здесь.

И, как указано в комментарии, удалите все ссылки на this из шаблона.