v-for通过选择器循环通过外部数组

Question

JS小提琴在这里：https://jsfiddle.net/eywraw8t/529272/

我有2个数组：

[＃1]价格表

let distance_fromTop = document.getElementById("ID_NAME").offsetTop;
window.scrollTo( 0 , distance_fromTop );

[＃2]零件

[
  {
    "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"
  }
  ...
]

我要遍历“部件”，并根据连接到[ { "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中的第二个数组，因为{{1 }}少于price list：

7

Answer 1

您可以使用方法调用，该方法调用将从输入中获取冒泡数字并返回较小或相等数字的索引。方法调用将替换硬编码值。它将变成如下：

%%timeit

我在jsfiddle上面进行了分叉，并使用计算属性和方法对其进行了更新，以根据您的逻辑获得动态价格。下面是更新的jsfiddle。这种方法可能效率不高，只是一个简单的例子。

https://jsfiddle.net/gowrimr/4qrws8kj/5/