vue, binding two values from selected option by v-model

Question

I have a working vue/laravel component where I'm using a v-for loop in a select box in order to create options from a vue array. This works properly.

My v-bind is properly binding the id of the selected option to featureID, but here's my question:

How can I also bind the feature.feature_name to another prop like featureName?

I don't see how I can bind the ID and the name of the selected option to two different props?

<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

You can't pass more than one value in an option tag, but what you can do is pass the whole object as the value. You just need to pass feature as the prop

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

Then you will have the whole object and you'll be able to get the id and/or the name.

Here's a JSFiddle

Answer 2

Instead of id of a feature you can use index of selected list item.

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

Accessing selectedFeature you've got selected feature object.