Update two data values using a Select input and v-model

Question

I have a simple Select input, binded to a data property (device_id) using v-model:

<select v-model="device_id">
  <option disabled value="">Choose a device</option>
  <option v-for="device in devices" v-bind:value="device.id">
    {{ device.name }}
  </option>
</select>

When the user picks a device, this.device_id is updated automatically, which is great! I can then save that to my database.

However... I also want to save this.device_name and for the life of me, I can't figure out how to "bind" or update both this.device_id AND this.device_name when the user clicks on an option.

I tried adding @click="updateName(device.name)" to my <option> tag, and then that method would update the second data property.

However this only works on Firefox, since other browsers don't trigger a click event on <option>. Besides it feels like kind of a weird/hacky way to do this.

Just to be clear, my question is: How can I update two data properties when the user clicks on an option?

I am sure there is a "correct" way and I would love to hear your ideas! This feels like a very straightforward problem and yet I can't seem to figure it out -_-

Thanks in advance!

Boussadjra Brahim · Accepted Answer · 2019-02-16 14:54:23Z

1

Try to bind the option value to the whole object and then work with properties of your selected one like :

<select v-model="selected_device">
  <option disabled value="">Choose a device</option>
  <option v-for="device in devices" v-bind:value="device">
    {{ device.name }}
  </option>
</select>

to send the id to your database just use this.selected_device.id and you could also use selected_device.name

answered Feb 16, 2019 at 14:54

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ouairz Over a year ago

Thank you! That worked great and was the obvious solution that I completely missed, haha

Collectives™ on Stack Overflow

Update two data values using a Select input and v-model

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related