使用来自输入的值的 Axios 进行 API 调用，Vue.js 3

Posted 2023-02-16

【中文标题】使用来自输入的值的 Axios 进行 API 调用，Vue.js 3

【英文标题】：Making API call using Axios with the value from input, Vue.js 3

【发布时间】：2021-11-22 00:10:16

【问题描述】：

我正在使用此 API 制作应用程序。我坚持的一点是调用 API。如果我给出国家的名称，就会出现那个国家的数据。

喜欢，res.data.Turkey.All

我想通过输入获取值，并带上输入国家的数据。

我正在通过 searchedCountry 获得价值。但我不能使用这个值。我的 API 调用不会发生在我得到的值上。我从控制台收到未定义的反馈。

有没有办法使用从输入接收到的数据进行调用？

---

<template>
  <div>
    <input
      type="search"
      v-model="searchedCountry"
      placeholder="Search country"
    />
  </div>
</template>

<script>
import axios from 'axios';
import  ref, onMounted from 'vue';

export default 
  setup() 
    let data = ref([]);
    const search = ref();
    let searchedCountry = ref('');

    onMounted(() => 
      axios.get('https://covid-api.mmediagroup.fr/v1/cases').then((res) => 
        data.value = res.data.Turkey.All;
      );
    );

    return 
      data,
      search,
      searchedCountry,
    ;
  ,
;
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

我正在使用 Vue.js 3

【参考方案1】：

您的代码有一些问题：

您的 axios 调用仅在组件挂载时调用一次（此处请注意，如果您真的想做类似的事情，可以直接在 setup 方法中进行） 您没有将值从 searchedCountry 传递到 axios API 使用const 引用

我会在 searchedCountry 上使用手表；像这样的东西（我不知道 API 合同）：

<template>
  <div>
    <input
      type="search"
      v-model="searchedCountry"
      placeholder="Search country"
    />
  </div>
</template>

<script>
import axios from 'axios';
import  ref, watch  from 'vue';

export default 
  setup() 
    const searchedCountry = ref('');
    const data = ref([]);

    watch(
        () => searchedCountry,
        (country) => axios.get(`https://covid-api.mmediagroup.fr/v1/cases/$country`).then((res) => data.value = res.data.Turkey.All);
    );

    return 
      data,
      searchedCountry,
    ;
  ,
;
</script>

【讨论】：

我们可以使用 Fetch 吗？我不能在方法之外使用data.value 得到的值，你有这方面的任何信息吗？我需要在设置中使用“lat, long”之类的值。

https://covid-api.mmediagroup.fr/v1/cases?country=$country 此 API 网址有效，谢谢您的回答