How to output data-attr?

Question

Vue.js

Good afternoon
, there is a component with a choice of cities

Город назначения:
    <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: {

        }
    }

can't get it right

:data-From="param.priceFrom"  :data-To="param.priceTo"

. Thanks

Answer 1

You don't need it, don't write in jquery. Let the selected value be the element of the deliveryPrice array itself, and not some of its properties:

<select v-model="selected">
  <option v-for="n in deliveryPrice" :value="n">{{ n.city }}</option>
</select>

Well, output whatever you want without problems:

<p>{{ selected.city }}</p>
<p>{{ selected.priceFrom }}</p>

If it suddenly strains [object Object], displayed as value in the markup, then you can make a computed property that will represent the selected element, leaving a string variable in 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);
  },
},