一个选择标签可以有两个 v-model 吗？答案

【问题标题】：Does one select tag can have two v-model?一个选择标签可以有两个 v-model 吗？
【发布时间】：2019-06-23 19:29:55
【问题描述】：

我有一个名为服务器的集合，它是这样的：{id，name，code}。我有这个选择标签，我用模型值遍历我的服务器集合和 data()。

<select v-model="serveur">      
   <option v-for="server in servers" :key="server.id" :value="server.name"> 
     {{server.name}}
   </option>
</select>

。 . .

data () {
 return {
  serveur:'',
  code:''
 }
}

选择的值“server.name”绑定到模型“serverur”。所有这些都可以正常工作，但我希望将值“server.code”绑定到模型“code”

我不知道该怎么做。我是 vuejs 的新手，就像我两天前第一次使用 vue 一样。这也是我的第一次 stackoverflow “询问”，所以我希望我说得够清楚。

提前致谢。

【问题讨论】：

看起来serveur 和code 应该始终同步。如果是这样，它们不应该是独立的数据项。
是的，确实代码已绑定到服务器。这就是为什么他们首先走到一起。但它们是独立的数据项，因为它们成为 url 中的单独参数。

标签： vue.js

【解决方案1】：

你确实有一个独立的数据项，我称之为selectedServer。它获取服务器条目的值，其中包含name 和code。

<select v-model="selectedServer">      
   <option v-for="server in servers" :key="server.id" :value="server"> 
     {{server.name}}
   </option>
</select>

您可以简单地在 URL 中引用 selectedServer.name 和 selectedServer.code 来组装它们，或者您可以创建计算值以使用您喜欢的任何名称返回这些值，例如

data: {
  selectedServer: {}
},
computed: {
  serveur() { return this.selectedServer.name; },
  code() { return this.selectedServer.code; }
}

【讨论】：

谢谢伙计！这解决了我的问题，并且我实际上不再需要使用此解决方案的“代码”数据项。

【解决方案2】：

为此，您可以将选择绑定到包含“serverur”和“code”的数组。但是你不能直接将select与多个变量绑定。

【讨论】：

感谢您的回复，但是如果在数组上执行“v-model=array”，添加到该数组的值不仍然是 :value="server.name" 吗？我

【解决方案3】：

你可以这样做：

<select @input="serveur = $event.name; code = $event.code">
   <option v-for="server in servers" :key="server.id" :value="server"> 
     {{ server.name }}
   </option>
</select>

如果您需要小提琴 - 请随时询问。这个例子可能不起作用:)

【讨论】：

感谢您的帮助。 @input 必须是一个方法或什么？

【解决方案4】：

相信你可以在这里找到答案： https://stackoverflow.com/a/50982485/10954996

这是我会做的事情 - 创建更改处理程序并在处理程序方法中更改我需要的所有内容

希望对你有帮助

【讨论】：

谢谢。实际上这可能会有所帮助，但除了 onChange 方法中选项的“值”之外，我什么也不能访问。我试图通过执行“event.target.key”来访问密钥只是为了尝试，但我得到了未定义的答案。