根据选择的选项打开下拉菜单

Question

目前onClick方法正在切换开类，同时显示3个下拉列表。

我想打开所选选项的下拉菜单，每次打开一个下拉菜单。

methods: {
        onClick: function(event) {
            this.is_open = !this.is_open;
        }
    }

http://jsfiddle.net/bs9Lh73m/

Answer 1

这种方法的问题是您需要能够区分三种不同的状态，每个按钮一个。下面是一种方法，用于跟踪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>

和

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

$index == openedCount是一个将解析为真或假的条件，这是使v-class应用该类所需要的。$index是v-repeat在当前模型中设置的一个特殊的Vue变量。我添加了一个名为openedCount的属性，用于指示当前应该打开哪个按钮。onClick调用使用$index来更新这个值