Question

我有一个叫做服务器的集合，它是这样的：{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”绑定到模型“ servur”。所有这些工作都很好，但是我希望将值“ server.code”绑定到模型“ code”

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

谢谢。

Answer 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; }
}

Answer 2

要实现此目的，可以将select与包含“ serveur”和“ code”的数组绑定。但是您不能直接将select与多个变量绑定。

Answer 3

您可以这样做：

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

如果您需要提琴-请随时提出。此示例可能无法正常工作：）

Answer 4

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

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

我希望这对您有帮助

一个选择标签可以有两个v模型吗？

4 个答案: