CODEWITHSUNDEEP
vue.jsv-for
Mr.Web
Mr.Web

Reputation: 7156

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

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

I have 2 arrays:

[#1] Price list

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

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

I'm looping thru "parts" and based off of a radio button connected to bubble_size I have to select n_bubble from price list array and select the matching size:

<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>

I'm trying to work on this:

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

I temporarily placed a 0 index as I don't have a clue on how to select the matching number based on pricelist.n_bubble. I need to select the closest less than based on parts.n_bubble

Expected result:

If I select radio bubble_size => 2 and n_bubble => 7, price should set at 98 as it should take the second array in price list, because 7 less than n_bubble 10:

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

Upvotes: 1

Views: 55

Answers (1)

Gowri
Gowri

Reputation: 394

You could use method call that would take the bubble number from input and return the index of lesser or equal number. The method call would replace the hard coded value. It would become as below:

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

I have forked above jsfiddle and updated it to get the dynamic price per your logic using a computed property and a method. Below is the updated jsfiddle. This method may not be as efficient but just a quick example.

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

Upvotes: 1

Related Questions