Как правильно выводить данные при выборе radio?

Question

[msdoc11]

Как правильно вывести цену при выборе определенного radio?

<label v-for="(size, index) in result.sizes" class="p-1 flex size relative">
   <input type="radio"  v-model="result.size"  :value="index" :data-size="size" v-model.number="result.indexOfSize" class="hidden">
   <span class="px-2 rounded-full size active">{{ size }}</span>
</label>

При выборе radio, данные цены выводятся сюда:

<span class="text-lg md:text-xl price">{{ result.prices }}</span>

sizes: [
     '256GB', '512GB'
     ],
prices: [
     '99 999', '105 999'
     ],
indexOfSize: 0,

indexOfSize используется, чтобы первый radio был всегда выбран.

Пробовал через такую конструкцию выводить, но не выходит:

<span class="text-lg md:text-xl price">{{result[result.indexOfSize].prices}}</span>

Comments

[Сергей delphinpro]

Зачем там два v-model?

Посмотрите официальную документацию. Там есть пример с радиокнопками.

Answer 1

[0xD34F]

Из массива с ценами надо выдернуть элемент, соответствующий выбранному индексу:

<span>{{ result.prices[result.indexOfSize] }}</span>

А вообще, что-то не могу никак понять - зачем раскладывать данные, относящиеся к одной сущности, по разным массивам? Я бы сделал массив объектов:

items: [
  { size: '256GB', price:  '99 999' },
  { size: '512GB', price: '105 999' },
],
index: 0,

<label v-for="(n, i) in result.items">
  <input type="radio" :value="i" v-model.number="result.index">
  <span>{{ n.size }}</span>
</label>

Выбранный элемент которого можно оформить как вычисляемое свойство:

computed: {
  selectedItem() {
    return this.result.items[this.result.index];
  },
  ...

Ну и вывод цены станет выглядеть так:

<span>{{ selectedItem.price }}</span>