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

Question

我有一个 Vue.js 应用程序，我使用 AXIOS 从数据库返回 API 调用。我设法返回了数据库条目的整个列表 (findAll) 但是我想根据 findAll 返回的 ID 执行 findOne 功能，findAll 的响应将包含所有详细信息及其唯一 ID，@987654324 @ 将获取这些唯一 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>