在选择框中使用v-model识别所选选项

Question

我有一个使用select标签的过滤器列表。我希望能够根据所选的选项过滤数组。我尝试使用v-model，因为这适用于复选框，但遗憾的是，它不适用于选择字段。

任何帮助都会很棒。

请找我附带的小提琴

<div id="app">
  Selected: {{concatenated}}
  <select>
    <option v-for="item in vals" :select="item.selected">{{item.value}}</option>
  </select>
  <!--
  <div v-for="item in vals">
    <p>
    <input type="checkbox" v-model="item.selected">{{item.value}}
    </p>  
  </div>
  -->
</div>

https://jsfiddle.net/39jb3fzw/2/

Answer 1

您应该查看文档以及它们如何使用select进行数据绑定。

https://jsfiddle.net/s3x096u3/1/

<select v-model="selected">
    <option v-for="item in vals" :value="item.value" :key="item.value">{{item.value}}</option>
  </select>

关于您的代码，select元素上的option属性不执行任何操作。