[Vuejs]-Open dropdown based on selected option

by

0👍

✅

The problem with that approach is you need to be able to distinguish three different states, one for each button. Here’s an approach that changes to tracking which of the items should be currently displayed by index:

http://jsfiddle.net/bs9Lh73m/2/

<label for="i_{{$index}}" v-on="click : onClick($index)">{{ model.type }}</label>
<div class="item_details" v-class="open : $index == openedCount">
    <span>Count
         <select v-model="modelCount">
             <option v-repeat="count : model.features[0].count" value="{{ count.int }}">
                 {{ count.int }}
             </option>
         </select>
    </span>
</div>

and

onClick: function ($index) {
    this.openedCount = $index;
}

The $index == openedCount is a conditional that will resolve to true or false which is what is needed to get v-class to apply the class. $index is a special Vue variable which is set in the current model by v-repeat. I added a property called openedCount that indicates which button should currently be considered to be opened. The onClick call uses $index to update this value.

Leave a comment