[Vuejs]-Pass values from Element UI autocomplete in the inputs of a table using VueJS

Your problem is related that you don’t know which row to update in your handleSelect. Since you’re not able to provide extra parameters to your handleSelect method you can do this by setting the currentItem when the auto-complete gets focus.

So first is to update the autocomplete (Added @focus, also changed v-model to value, this is nicer to use I think):

<el-autocomplete
   class="inline-input"
   :value="scope.row.item_name"
   value-key="item_name"
   :fetch-suggestions="querySearch"
   placeholder=""
   :trigger-on-focus="false"
   @focus="setCurrentItem(scope.row)"
   @select="handleSelect"
></el-autocomplete>

Update your data/methods in the JS:

 data() {
    return {
      currentItem: null,
      // other already existing data
    };
  },
  methods: {
    // other already existing methods
    setCurrentItem(item) {
        this.currentItem = item
    },
    handleSelect(item) {
      this.currentItem.item_name = item.item_name;
      this.currentItem.price = item.selling_price;
    }
  }

For unique values you’ve to create a computed value which returns all values except the ones that are already used

For updating the price of a row you could do this 2 different ways (either way amountfn method could be removed):

1. on change, but action is only trigger when field loses focus

   <el-input v-model="scope.row.price" @change="updateTotal(scope.row)"></el-input>
   
   updateTotal(item) {
      item.total = item.price * item.qty
   },
   

2. Use a deep watch, update is performed immediately

    watch: {
       'cart.items' : {
           deep: true,
           handler: (items) => {
              items.forEach(element => element.total = element.price * element.qty)
            }
         }
     }