@astrodeep

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

Добрый день
есть компонент с выбором городов
Город назначения:
    <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"
. Спасибо
  • Вопрос задан
  • 75 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
Вам это не надо, не на jquery же пишите. Пусть выбранным значением будет сам элемент массива deliveryPrice, а не какое-то из его свойств:

<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);
  },
},
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы