时间戳

首页 > 解决方案 > Vue - 从 array.push 中的 select 传递参数

vue.js - Vue - 从 array.push 中的 select 传递参数

问题描述

从 select传递params时，通常的语法是这样的。

<v-select
  v-model="item_id"
  items="items"
  item-text="item_name" 
  item-value="id" 
  @change='itemDescription()'
/>

export default {
  data: ()=> ({
    item_id: '',
    items: [],
    itemDescription '',
  }),
  method: {
    itemDescription() {
      axios.get('/api/item', {
        params: { id: this.item_id }
      })
      .then(response => this.itemDescription = response.data )
    }
  }
}

Now the problem comes when the select is inside an array.push. 我不能简单地将值传递给，this.item_id因为结构是object[0][1]. 下面是一个示例语法。

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

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

每次选择每一行时如何通过id每一行？

标签： vue.jsvuetify.js

解决方案

itemDescription 方法中的“this”与“method:”中的“this”不同。所以它不会工作。

使用另一个变量来保留它，并在 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 )
    }

推荐阅读