[Vuejs]-Vue – Pass params from select inside an array.push

by

0👍

I made it work now. I just used index, this was my savior.

Please see code below for those interested

<v-btn @click="addItem()">Add</v-btn>
<template v-for="(item, index) in items" :key="item.id>
  <v-select
    v-model="item.item_id"
    items="item_all"
    item-text="item_name" 
    item-value="id" 
    @change='itemDescription(index)'
  />
</template>

export default {
  data: ()=> ({
    items: [],
    item_all: '',
    itemDescription '',
  }),
  method: {
    addItem() {
      this.items.push({
      item_id: '',
      description: '',
    }),
    itemDescription(index) {
      axios.get('/api/item', {
        params: { id: this.items[index].item_id } // <-- this doesn't work
      })
      .then(response => this.items[index].description = response.data )
    }
  }
}

0👍

The ‘this’ in itemDescription method isn’t same as ‘this’ in ‘method:’.
so it will not work.

use another variable to keep this, and use it in itemDescription.

  method: {
    var that = this;
    addItem() {
      this.items.push({
      item_id: '',
      description: '',
    }),
    itemDescription() {
      axios.get('/api/item', {
        params: { id: that.items.item_id } // 'this' ain't work
      })
      .then(response => this.items.description = response.data )
    }

Leave a comment