[Vuejs]-Dynamically Display Remotely Populated Dropdown in Vue.JS

by

0👍

That the issue is is that you’re binding the same parameter to the multiple select fields. So, when one select field is changed, it triggers others to change.

What you have to do is re-organize your component.

  1. Extract the select field and text input to a separate component. (component can be named something like this: ‘stock-list’.
  2. Create an array with the list of stocks and number of units as parameters. Something like this:
stockList: [{stockCode: "BUACEM", units: 0}]
  1. Mount the component and add a v-for attribute to the stockList variable. something like this: 
    <stock-list v-for="stock in stockList" :key="stock.stockCode"></stock-list>

This should solve the issue.

You can then add to the stockList array when handling the click event for the plus button while you remove from it using the minus button.

Hope that suffices.

Leave a comment