[Vuejs]-Setting one line item 'active' at a time in vue

by

1👍

✅

You need to use a unique identifier to determine which comment is active. In the most rudimentary way using your current setup:

<li class="commentToggle" 
        v-bind:class="{active:commentActive === 'new'}" 
        v-on:click="setInputName('new')">
    New Comment
</li>
<li class="commentToggle" 
        v-bind:class="{active:commentActive === 'note'}" 
        v-on:click="setInputName('note')">
    Note
</li>

setInputName(str) {
  this.inputName = str;
  this.commentActive = str;
},

The adjustment that we made is to ensure that the commentActive matches the str that we’ve used. You can change that identifier to anything else, and pass additional arguments if you so choose.

👤Ohgodwhy

Leave a comment