v-for 基于选择器循环遍历外部数组

Question

JS Fiddle 这里：https://jsfiddle.net/eywraw8t/529272/

我有 2 个数组：

[#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",
  }
]

我正在循环 "parts" 并基于连接到 bubble_size 的单选按钮我必须从 price list 数组 select n_bubble 和select匹配尺码：

<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索引，因为我不知道如何select基于pricelist.n_bubble的匹配号码。我需要 select 基于 parts.n_bubble

最接近的 less than

预期结果：

如果我 select radio bubble_size => 2 和 n_bubble => 7，price 应该设置在 98 因为它应该采用 [=17= 中的第二个数组], 因为 7 小于 n_bubble 10:

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

Answer 1

您可以使用从输入中获取气泡编号的方法调用和 return 较小或相等编号的索引。方法调用将替换硬编码值。它将变成如下：

v-model.number="price_list[findPriceIndex(part.n_bubble)]['size_'+part.bubble_size]"

我已经在 jsfiddle 上面分叉并更新它以使用计算的属性和方法根据您的逻辑获取动态价格。下面是更新的 jsfiddle。此方法可能效率不高，但只是一个简单的示例。

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

v-for 基于选择器循环遍历外部数组

v-for to loop thru an exernal array based on a selector

vue.js

v-for

[#1] 价目表

[#2] 部分

预期结果：