文章/答案/技术大牛

发布

社区首页 >问答首页 >基于选择器循环遍历外部数组的v-for

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

Stack Overflow用户

提问于 2019-01-03 16:08:51

回答 1查看 47关注 0票数 1

JS小提琴在这里：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的单选按钮，我必须从price list数组中选择n_bubble并选择匹配的大小：

<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选择匹配的数字。我需要根据parts.n_bubble选择最接近的less than

预期结果：

如果我选择单选bubble_size => 2和n_bubble => 7，price应该设置为98，因为它应该采用price list中的第二个数组，因为7小于n_bubble 10

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

v-for

vue.js

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-01-07 10:22:09

您可以使用方法调用从输入中获取气泡号，并返回小于或等于气泡号的索引。方法调用将替换硬编码值。它将如下所示：

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

我已经派生了上面的jsfiddle，并使用计算属性和方法对其进行了更新，以获得每个逻辑的动态价格。下面是更新后的jsfiddle。这种方法可能不是很有效，但只是一个快速的例子。

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/54018480

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问基于选择器循环遍历外部数组的v-forEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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