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

【问题标题】：Identify selected option using v-model in select box在选择框中使用 v-model 识别所选选项
【发布时间】：2017-09-22 20:11:16
【问题描述】：

我有一个使用选择标签的过滤器列表。我希望能够根据所选选项过滤数组。我尝试使用 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/

【问题讨论】：

标签： arrays data-binding vue.js

【解决方案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>

关于您的代码，option 元素上的 select 属性没有任何作用。

【讨论】：

是的，我已经检查了文档并解决了问题，但我希望计算值来控制输出，而不是在 data.xml 中声明的选定值。有没有办法解决这个问题？
“我希望计算值控制输出”到底是什么意思，为什么要这样？
我将使用一个数组和 3 个选择框。每个选择框在被选中时都会更新数组，并且输出基于数组中的内容。希望这是有道理的。
当然。只需在 data 中声明 3 个值，然后创建一个计算属性，返回包含这 3 个值的数组。
你刚刚在你的问题中链接了同样的东西。