Question

目前onClick方法正在切换公开课程，一次显示3个下拉列表。

我想打开所选选项的下拉列表，一次打开一个下拉列表。

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应用该类所需的条件。 $index是一个特殊的Vue变量，由v-repeat在当前模型中设置。我添加了一个名为openedCount的属性，指示当前应该考虑打开哪个按钮。 onClick来电使用$index来更新此值。

根据所选选项打开下拉列表

1 个答案: