根据所选选项打开下拉菜单

Question

目前 onClick 方法正在切换打开 class，同时显示 3 个下拉菜单。

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

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

http://jsfiddle.net/bs9Lh73m/

Answer 1

该方法的问题是您需要能够区分三种不同的状态，每个按钮一个。这是一种更改为跟踪当前应按索引显示哪些项目的方法：

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 是一个条件，它将解析为 true 或 false，这是让 v-class 应用 class 所需要的。 $index 是一个特殊的 Vue 变量，由 v-repeat 在当前模型中设置。我添加了一个名为 openedCount 的属性，它指示当前应考虑打开哪个按钮。 onClick 调用使用 $index 更新此值。

根据所选选项打开下拉菜单

Open dropdown based on selected option

javascript

vue.js