vue，通过 v-model 绑定来自所选选项的两个值

Posted 2023-02-23

【中文标题】vue，通过 v-model 绑定来自所选选项的两个值

【英文标题】：vue, binding two values from selected option by v-model

【发布时间】：2020-03-15 10:23:42

【问题描述】：

我有一个工作的 vue/laravel 组件，我在选择框中使用 v-for 循环，以便从 vue 数组创建选项。这可以正常工作。

我的 v-bind 将所选选项的 id 正确绑定到 featureID，但这是我的问题：

我怎样才能将 feature.feature_name 绑定到另一个 prop，比如 featureName？

我看不到如何将所选选项的 ID 和名称绑定到两个不同的道具？

<select v-model="featureID">
  <option v-for="feature in features" v-bind:value="feature.id">
    @ feature.name 
  </option>
</select>

data: 
    featureID: [''],
    features: [id:1, name: 'test', id:2, name: 'good]

【问题讨论】：

我假设你的意思是 feature.name 和 feature.id，对吧？这就是与您的数据集匹配的内容。

对不起@user1015214，错字。刚刚修好了

【参考方案1】：

你不能在一个选项标签中传递多个值，但你可以做的是传递整个对象作为值。你只需要传递feature 作为道具

<select v-model="featureID">
  <option v-for="feature in features" v-bind:value="feature">
    @ feature.name 
  </option>
</select>

data: 
    featureID: [''],
    features: [id:1, name: 'test', id:2, name: 'good]

然后您将拥有整个对象，并且您将能够获取 id 和/或名称。

这是JSFiddle

【参考方案2】：

您可以使用所选列表项的索引来代替id 的功能。

<select v-model="selectedIdx">
  <option v-for="(feature, index) in features" v-bind:value="index" :key="index">
    @ feature.name 
  </option>
</select>

data: 
  selectedIdx: null,
  features: [
    id:1, name: 'test',
    id:2, name: 'good',
  ]
,
computed: 
  selectedFeature() 
    return this.features[this.selectedIdx]
   

访问selectedFeature 你已经选择了特征对象。