Город назначения:
<select v-model="city2" name="town_from" id="town_from" >
<option :data-From="param.priceFrom" :data-To="param.priceTo" v-for="param in deliveryPrice" >{{param.city}} </option>
</select>
{{city2}} <p>{{selected}}</p>
export default {
name: 'app',
data() {
return {
selected: "",
city2:'',
deliveryPrice: [
{city: 'Абакан', priceFrom: 1000, priceTo: 2100},
{city: 'Алушта', priceFrom: 2000, priceTo: 3100},
{city: 'Барнаул', priceFrom: 3000, priceTo: 4100}
],
}
},
methods: {
changeItem(event) {
var good = this.getAttribute('data-From');
this.selected = event.target.good
}
},
computed: {
}
}
:data-From="param.priceFrom" :data-To="param.priceTo"
. Спасибо <select v-model="selected">
<option v-for="n in deliveryPrice" :value="n">{{ n.city }}</option>
</select>
<p>{{ selected.city }}</p>
<p>{{ selected.priceFrom }}</p>
[object Object]
, отображаемый в качестве value в разметке, то можно сделать computed свойство, которое будет представлять выбранный элемент, оставив в v-model строковую переменную:<select v-model="city">
<option v-for="n in deliveryPrice">{{ n.city }}</option>
</select>
computed: {
selected() {
return this.deliveryPrice.find(n => n.city === this.city);
},
},