Question

我有一个Vue.js应用程序，我使用AXIOS从数据库返回API调用。我设法返回了数据库条目（findAll）的整个列表，但是我想根据findOne返回的ID执行findAll功能，其响应将包含所有详细信息，它们的唯一ID findOne将采用这些唯一ID并将其附加到url参数。

任何帮助或建议将不胜感激。

使用 Vue.js

返回列表

<div class="results" v-if="showResult">
  <div v-for="(response) in response">
    <div class="card-divider">
      <p>{{response.name}} {{response.id}}
        <!--Potentially a link such as url/{response.id}-->
        <button @click="getCurrencyOne();">X</button>
      </p>
    </div>
  </div>
</div>

AXIOS 查找全部

findAll() {
  axios
    .get(`/url/`)
    .then(response => {
        if (response.status == 200) {
            this.response = response.data

            if (response.data.length == 1){
                console.log("There is one entry")
            }
            else if (response.data.length ) {
                console.log("There are " + response.data.length + " entries")
            }

            this.showResult = true
        }
    });
}

AXIOS 找到一个

findOne() {
  axios({
    method: 'GET',

    //1 would be the id of the object
    url: 'url' + 1,

    headers: {
      'Content-type': 'application/json'
    },
  })
  .then(response => {
    this.response = response.data.id
      // this.test = response.data.map(currency => currency.id)
      console.log(response.data.id)

      console.log(this.response)
  })
}

Answer 1

您可以将id传递给方法getCurrencyOne(resp.id)：

getCurrencyOne(id) {
  axios({
      method: 'GET',

      //1 would be the id of the object
      url: 'url/' + id,

      headers: {
        'Content-type': 'application/json'
      },
    })
    .then(response => {
      this.response = response.data.id
      // this.test = response.data.map(currency => currency.id)
      console.log(response.data.id)

      console.log(this.response)
    })
}

<div class="results" v-if="showResult">
  <div v-for="(resp) in response">
    <div class="card-divider">
      <p>{{resp.name}} {{resp.id}}

        <button @click="getCurrencyOne(resp.id)">X</button>
      </p>
    </div>
  </div>
</div>

Vue Axios检索列表中对象的响应ID

1 个答案: