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

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}

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"

},

edited Jan 7 at 2:33

Phil

100k12147164

asked Jan 3 at 8:08

Mr.Web

3,16162961

Is the price-list array in order of n_bubble?

– Phil
Jan 7 at 2:48

add a comment |

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"

},

edited Jan 7 at 2:33

Phil

100k12147164

asked Jan 3 at 8:08

Mr.Web

3,16162961

Is the price-list array in order of n_bubble?

– Phil
Jan 7 at 2:48

add a comment |

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"

},

edited Jan 7 at 2:33

Phil

100k12147164

asked Jan 3 at 8:08

Mr.Web

3,16162961

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"

},

vue.js v-for

edited Jan 7 at 2:33

Phil

100k12147164

asked Jan 3 at 8:08

Mr.Web

3,16162961

edited Jan 7 at 2:33

Phil

100k12147164

asked Jan 3 at 8:08

Mr.Web

3,16162961

edited Jan 7 at 2:33

Phil

100k12147164

edited Jan 7 at 2:33

Phil

100k12147164

edited Jan 7 at 2:33

Phil

100k12147164

asked Jan 3 at 8:08

Mr.Web

3,16162961

asked Jan 3 at 8:08

Mr.Web

3,16162961

asked Jan 3 at 8:08

Mr.Web

3,16162961

Is the price-list array in order of n_bubble?

– Phil
Jan 7 at 2:48

add a comment |

Is the price-list array in order of n_bubble?

– Phil
Jan 7 at 2:48

Is the price-list array in order of n_bubble?

– Phil
Jan 7 at 2:48

add a comment |

1 Answer
1

active

oldest

votes

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/

answered Jan 7 at 2:22

Gowri

36428

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54018480%2fv-for-to-loop-thru-an-exernal-array-based-on-a-selector%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

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

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

answered Jan 7 at 2:22

Gowri

36428

add a comment |

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

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

answered Jan 7 at 2:22

Gowri

36428

add a comment |

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

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

answered Jan 7 at 2:22

Gowri

36428

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

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

answered Jan 7 at 2:22

Gowri

36428

answered Jan 7 at 2:22

Gowri

36428

answered Jan 7 at 2:22

Gowri

36428

answered Jan 7 at 2:22

Gowri

36428

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu