Question

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

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

如何将feature.feature_name绑定到另一个诸如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}]
}

Answer 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

Answer 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，您已经选择了特征对象。

Vue，按v模型绑定选定选项中的两个值

2 个答案: