基于选择器的执行数组的V-for循环

JS Fiddle: https://jsfiddle.net/eywraw8t/529272/

我有两个数组:

(1)价格表

[
  {
    "n_bubble": "2",
    "size_1": "40.00",
    "size_2": "72.00",
    "size_3": "112.00"
  },
  {
    "n_bubble": "5",
    "size_1": "65.00",
    "size_2": "98.00",
    "size_3": "144.00"
  },
  {
    "n_bubble": "10",
    "size_1": "90.00",
    "size_2": "138.00",
    "size_3": "183.00"
  }
  ...
]

〔2〕部分

[
  {
    "id": 1,
    "bubble_size": "1",
    "n_bubble": "0",
    "price": "0",
  },
  {
    "id": 2,
    "bubble_size": "2",
    "n_bubble": "7",
    "price": "0",
  },
  {
    "id": 3,
    "bubble_size": "1",
    "n_bubble": "0",
    "prezzo": "0",
  },
  {
    "id": 4,
    "bubble_size": "1",
    "n_bubble": "0",
    "prezzo": "0",
  }
]

我正在循环浏览“部件”,基于连接到 bubble_size 我必须选择 n_bubble 从 price list 数组并选择匹配大小:

<div v-for="(part, index) in parts" :key="part.id">
    <label>Bubble size</label><br>

    <label>1 
    <input type="radio" v-model="part.bubble_size" :checked="part.bubble_size == 1" value="1" :name="'bubble_size['+index+']'" /></label>

    <label>2 <input type="radio" v-model="part.bubble_size" :checked="part.bubble_size == 2" value="2" :name="'bubble_size['+index+']'" /></label>

    <label>3 <input type="radio" v-model="part.bubble_size" :checked="part.bubble_size == 3" value="3" :name="'bubble_size['+index+']'" /></label><br>

    <label>Bubble number <input type="number" min="0" v-model.number="part.n_bubble" /></label><br>

    <label for="">Price <input type="number" min="0" v-model.number="price_list[0]['size_'+part.bubble_size]" /></label>
    <br><br>
</div>

我正在努力解决这个问题:

<input v-model.number="price_list[0]['size_'+part.bubble_size]" type="number" />

我暂时放了一个 0 索引,因为我不知道如何根据 pricelist.n_bubble . 我需要选择最近的 less than 基于 parts.n_bubble

预期结果:

如果我选择收音机 bubble_size => 2 和 n_bubble => 7 , price 应该设置 98 因为它应该接收第二个数组 价格表 ,因为 7 小于 n_bubble 10 :

{
 "n_bubble": "5",
 "size_1": "65.00",
 "size_2": "98.00", // <---- this one
 "size_3": "144.00"
},