使用 Select 輸入和 v-model 更新兩個數據值

Question

我有一個簡單的 Select 輸入，使用 v-model 綁定到數據屬性（ device_id ）：

<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>

當用戶選擇設備時， this.device_id會自動更新，這很棒！ 然后我可以將其保存到我的數據庫中。

但是......我也想保存this.device_name並且在我的一生中，當用戶單擊一個選項時，我無法弄清楚如何“綁定”或更新this.device_id和this.device_name 。

我嘗試將@click="updateName(device.name)"到我的<option>標記中，然后該方法將更新第二個數據屬性。

然而，這只適用於 Firefox，因為其他瀏覽器不會在<option>上觸發點擊事件。 此外，它感覺像是一種奇怪/hacky 的方式來做到這一點。

為了清楚起見，我的問題是：當用戶單擊一個選項時，如何更新兩個數據屬性？

我相信有一種“正確”的方式，我很想聽聽你的想法！ 這感覺是一個非常簡單的問題，但我似乎無法弄清楚-_-

提前致謝！

Answer 1

嘗試將選項值綁定到整個對象，然后使用所選對象的屬性，例如：

<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>

將 id 發送到您的數據庫只需使用this.selected_device.id ，您也可以使用selected_device.name