How to display data correctly when radio is selected?

Question

JavaScript

Hello. How to correctly display the price when choosing a specific 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>

When radio is selected, price data is displayed here

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

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

indexOfSize is used so that the first radio is always selected

Tried to output through such a construction, but it does not work out

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

Answer 1

From the array with prices, you need to pull out the element corresponding to the selected index:

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

In general, I can’t understand something in any way - why decompose data related to the same entity into different arrays? I would make an array of objects:

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>

The selected element of which can be styled as a computed property:

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

Well, the output of the price will look like this:
<span>{{ selectedItem.price }}</span>