Does one select tag can have two v-model?

Question

I have this collection called servers which is like this: {id, name, code}. I have this select tag, I iterate over my servers collection and the data() with the model values.

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

. . .

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

The value "server.name" selected is binded to the model "serveur". All of this works just fine, but I want the value "server.code to be binded to the model "code"

I can't figure out how to do this. I'm new to vuejs, like I've been working with vue for the first time only two days ago. This is also my first Stack Overflow "asks" so I hope I am being clear enough.

Thanks in advance.

It looks like `serveur` and `code` should always be synchronized. If so, they should not be independent data items. — Roy J, Jan 30 '19 at 14:18
Yes indeed code is bound to a serveur. thats why they come together in the first place. But they are independent data items because they become separate parameters in an url. — Lexinho, Jan 30 '19 at 14:25

score 1 · Accepted Answer · answered Jan 30 '19 at 14:31

You really have one independent data item, which I will call selectedServer. It gets the value of the server entry, which contains both name and code.

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

You can simply refer to selectedServer.name and selectedServer.code in the URL you need to assemble from them, or you can create computeds to return those values under whatever names you prefer, like

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

Thanks mate! That solved my problem and I don't actually need the "code" data item anymore with this solution. — Lexinho, Jan 30 '19 at 14:36

score 0 · Answer 2 · answered Jan 30 '19 at 13:48

0

To achieve this, you can bind the select with an array containing 'serveur' and 'code'. But you can't bind the select with multiple variables directly.

answered Jan 30 '19 at 13:48

Gaurav Neema

146
1
1
12

Thanks for the reply, but if do "v-model=array" on an array, isn't the value added to that array still gonna be :value="server.name"? I – Lexinho Jan 30 '19 at 13:57

score 0 · Answer 3 · answered Jan 30 '19 at 13:51

0

You can do comething like that:

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

If you need fiddle - feel free to ask. It is possible that this example not working :)

answered Jan 30 '19 at 13:51

gleam

861
6
12

Thanks for the help. @input has to be a method or something? – Lexinho Jan 30 '19 at 14:31

Mario Rogulj · Answer 4 · 2019-01-30T14:03:55.487

0

I believe you can find an answer here: https://stackoverflow.com/a/50982485/10954996

that is something I would do - create change handler and change everything I need within handler method

I hope this helps

edited Jan 30 '19 at 14:03

answered Jan 30 '19 at 13:51

Mario Rogulj

56
4

Thanks. actually this could help, but I can't acces anything but the "value" of the option in the onChange method. i tried to acces the key by doing "event.target.key" just to try but i get undefined answer. – Lexinho Jan 30 '19 at 14:31

Does one select tag can have two v-model?

4 Answers4