javascript - 在循环外使用 v-for 键

Question

我有一个简单的v-for，它在选择框中呈现项目列表，如下所示:

<div class="col-md-4">
        <select class="form-control" v-model="tableStyle">
            <option v-for="(item,key) in tableStyles">
                {{ item }}
            </option>
        </select>
    </div>

然后我有一个按钮可以删除特定项目，即选定的项目。我想访问它的 key ，以便可以轻松地将其删除。我怎样才能做到这一点？目前我的 key 是未定义。我可以使用 v-model 来实现吗？

<button @click="removeStyle(key)" class="btn btn-default btn-xs">
        <span class="glyphicon glyphicon-remove text-danger"></span>
    </button>

Answer 1

当从 select 元素中选择 option 时，它已将 v-model 绑定(bind)到某些内容 (tableStyle code> 在您的情况下)所选 option 元素的 value 属性将被分配在那里。因此，您可以将 value 绑定(bind)到 key:

<select class="form-control" v-model="tableStyle">
    <option v-for="(item,key) in tableStyles" v-bind:value="key">
        {{ item }}
    </option>
</select>

然后您可以使用您的tableStyle:

<button @click="removeStyle(tableStyle)" class="btn btn-default btn-xs">
    <span class="glyphicon glyphicon-remove text-danger"></span>
</button>

工作示例:https://jsfiddle.net/hy21um75/