Как вывести data-attr?

Question

[Алекс]

Добрый день
есть компонент с выбором городов

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

. Спасибо

Comments

[Артем Кондрацкий]

document.querySelector('option').dataset.From
document.querySelector('option').dataset.To

[Алекс]

Артем Кондрацкий, так ето не работает, я пробовал)

Answer 1

[0xD34F]

Вам это не надо, не на jquery же пишите. Пусть выбранным значением будет сам элемент массива deliveryPrice, а не какое-то из его свойств:

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

Ну и выводите чего хотите без проблем:

<div v-if="selected">
  <div>{{ selected.city }}</div>
  <div>{{ selected.priceFrom }}</div>
</div>

Если вдруг напрягает [object Object], отображаемый в качестве value в разметке, то v-model пусть по-прежнему с примитивными значениями работает, а выбранный объект оформляем как computed свойство:

<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);
  },
},

или

<select v-model="selectedIndex">
  <option v-for="(n, i) in deliveryPrice" :value="i">{{ n.city }}</option>
</select>

data: () => ({
  selectedIndex: -1,
}),

computed: {
  selected() {
    return this.deliveryPrice[this.selectedIndex];
  },
},

Comments

[Алекс]

Спасибо большое.