CODEWITHSUNDEEP
vue.jsbootstrap-4
Sreenath Ganga
Sreenath Ganga

Reputation: 736

Retain the selected List group item using Vue,js

I am trying to develop a Quiz app .When user select a answer I set selected list item class as active.But when user select the answer of another question the first active list borders disappear See issue image

I have a model like below

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

And in the View I am using vue.js to Show the Question 

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

My Vue.js Script is as below

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

 }    
        })

Adding Jsfiddle as requested

Upvotes: 1

Views: 859

Answers (2)

Qonvex620
Qonvex620

Reputation: 3972

You could directly bind your condition in a button, see code below

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

So in your case the problem is that you have to classes in your tag, the one was in v-bind. to fix this follow the

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

then in your methods, do it what you have done previously

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

Upvotes: 1

AVJT82
AVJT82

Reputation: 73367

Actually your active class isn't applied at all. You are doing for example following check:

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

wheras it should be AnswerOption instead of answerOption:

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

Your fixed fiddle.

Upvotes: 1

Related Questions