Сохранить выбранный элемент группы списков, используя Vue, js

Question

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

У меня есть модель, как показано ниже

public class QuestionViewModel
{
    public int QuestionId { get; set; }
    public int CertificationId { get; set; }
    public string FullQuestion { get; set; }
    public string AnswerOption1 { get; set; }
    public string AnswerOption2 { get; set; }
    public string AnswerOption3 { get; set; }
    public string AnswerOption4 { get; set; }
    public string CorrectAnswer { get; set; }
    public string UserAnswer { get; set; }
    public string isCorrect { get; set; }
}

И в представлении я использую vue. js, чтобы показать вопрос

<div id="app">
    <div v-for="(item, index) in questionViewModals" class="Question" style="margin:5px">
        <div class="card">
                    <div class="card-body">
                <h5 class="card-title">{{item.fullQuestion}} </h5>
                <p class="card-text"><strong>Options :</strong></p>
                <div class="list-group">


                <button type="button" class="list-group-item list-group-item-action" v-bind:class="{ 'active' : (item.UserAnswer == item.answerOption1) }"  v-on:click="item.UserAnswer = item.answerOption1">{{item.answerOption1}}</button>
                <button type="button" class="list-group-item list-group-item-action" v-bind:class="{ 'active' : (item.UserAnswer == item.answerOption2) }"  v-on:click="item.UserAnswer = item.answerOption2">{{item.answerOption2}}</button>
                <button type="button" class="list-group-item list-group-item-action" v-bind:class="{ 'active' : (item.UserAnswer == item.answerOption3) }"  v-on:click="item.UserAnswer = item.answerOption3">{{item.answerOption3}}</button>
                <button type="button" class="list-group-item list-group-item-action" v-bind:class="{ 'active' : (item.UserAnswer == item.answerOption4) }"  v-on:click="item.UserAnswer = item.answerOption4">{{item.answerOption4}}</button>
            </div>        
                <button v-on:click='item.isShowAnser = !item.isShowAnser' class="btn btn-primary"></button>

            </div>                
        </div>
    </div>             
    </div> 

Моя Vue. js Сценарий, как показано ниже

     var vueApp = new Vue({
            el: '#app',
           data: {
            questionViewModals: null
        },
      methods: {    

 }    
        })

Добавление Jsfiddle по запросу

Answer 1

На самом деле ваш active класс вообще не применяется. Вы делаете, например, следующую проверку:

{ 'active' : (item.UserAnswer == item.answerOption1) }

где должно быть AnswerOption вместо answerOption:

{ 'active' : (item.UserAnswer == item.AnswerOption1) }

Ваш фиксированный скрипка .

Answer 2

Вы можете напрямую связать свое состояние с помощью кнопки, см. Код ниже

<div class="list-group">
    <button type="button" class="list-group-item list-group-item-action" v-bind:class="{ 'active' : (item.UserAnswer == item.answerOption1) }" v-on:click="item.UserAnswer = item.answerOption1">{{item.answerOption1}}</button>
</div>

Так что в вашем случае проблема заключается в том, что у вас есть классы в вашем теге, который был в v-bind. чтобы исправить это, следуйте инструкциям

<div class="list-group">
   <button type="button" :class="[(item.UserAnswer == item.AnswerOption1 ? 'active' : ''), 'list-group-item', 
   'list-group-item-action']" v-on:click="showAnswer(item)">{{item.answerOption1}}</button>
</div>

, затем в ваших методах сделайте то, что вы сделали ранее

methods: {
      showAnswer(item, answer) {
          item.UserAnswer = answer
      }
  }