VUE JS: Common Issues

Problem: I have a table with several dropdowns and is calling the API for each row

Solution: In beforeMount (before any component is ready) you can load the list:

beforeMount: function() {
    this.loading = true
    findCarts({}).then(response => {
      this.loading = false
      if (response.status) {
        this.cartList = response.data
      }
    })
  },

Use this list for each customList:

 <customList
  field-key="cart_id"
  :field-value.sync="scope.row.cart_id"
  :list="cartList"
  @value:updated="(obj) => handleCartModel(scope.$index, scope.row, obj)"
 />

method to handle:

handleCartModel(index, row, obj) {
    this.items[index][obj.key] = obj.value
}

In the dropdown onChange you can capture the index to know which line is updating with the new value