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>

然后我有一个按钮，应该删除一个特定的项目，选中的项目。我想访问它的密钥，以便我可以轻松删除它。我怎样才能做到这一点？目前我的密钥是undefined。我可以使用v-model吗？

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

Answer 1

从option元素中选择select，并且v-model绑定到某些内容（在您的情况下为tableStyle）时，value属性为将在那里分配所选的option元素。因此，您可以将value绑定到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/

Answer 2

我检查了您的代码，它只是不完整。出于这个原因，我想澄清一下，以增进您对Vue实例工作方式的了解。

首先，请记住，HTML标签select对option的每个项目都使用tableStyles标签。现在，此option标签应具有一个value参数和一个text，如下所示：

<select>
  <option value="0">Style 01</option>
  ...
  <option value="3">Style 04</option>
</select>

现在，我们需要的是一种将数组tableStyles的每个键分配给value标签的每个参数option并呈现数组{{1 }}作为tableStyles标签的text。

option

此外，请不要忘记<option v-for="(item, key) in tableStyles" :value="key"> {{item}} </option>指令，该指令在表单元素上创建双向数据绑定。这意味着，它将根据输入类型自动选择正确的方式来更新元素。我们可以通过在v-model实例创建过程中将selected添加到数据定义并将Vue添加到v-model="selected"标记中来实现。

好的Teocci，但是为什么我在select标签的undefined事件中为参数key调用了onClick？

好吧，这是因为密钥仅位于button范围内的defined内，并且此范围是由v-for标记定义的。

然后，如何将选定的密钥移出option范围？

容易，只需使用v-for标记的所有范围中定义的selected，如以下代码片段所示：

selector

new Vue({
  el: '#selector',
  data: {
    selected: '',
    tableStyles: ['Style 01', 'Style 02', 'Style 03', 'Style 04'],
  },
  methods: {
    removeStyle: function(key) {
      this.tableStyles.splice(key, 1);
    },
  },
});

#selector .main{
  float: left;
  padding-left: 50%;
  padding: 0px 0px 0px 16px !important;
  border: none;
  vertical-align: middle;
  height: 48px;
  line-height: 48px;
}

在循环外使用v-for键

2 个答案: