我如何使另一个API调用onclick在vue js

im9ewurl 于 2022-12-30 发布在 Vue.js

关注(0)|答案(2)|浏览(132)

我是新的vue js，我有这个组件，我试图使另一个API调用单击其中一个列表选项。

<template>
  <div>
    <h1 class="text-center text-4xl font-bold">Our Product</h1>
    <ul class="flex items-center justify-center gap-5">
      <li class="cursor-pointer text-xl" @click="handleClick(1)">Clothes</li>
      <li class="cursor-pointer text-xl" @click="handleClick(5)">Shoes</li>
      <li class="cursor-pointer text-xl" @click="handleClick(2)">Watches</li>
      <li class="cursor-pointer text-xl" @click="handleClick(4)">Furniture</li>
    </ul>
    <div class="grid grid-cols-3 gap-5">
      <div v-for="store in stores" :key="store.category.id">
        <div class="max-w-xl h-auto">
          <img :src="store.images[0]" alt="img" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { computed, ref, watch } from "vue";

import Clothes from "../Products/Clothes.vue";
import Shoes from "../Products/Shoes.vue";
import axios from "axios";

export default {
  components: {
    Clothes,
    Shoes,
  },
  props: [],
  data() {
    return {
      stores: [],
      errors: [],
      product: ref(1), //Where product is the changeable value
    };
  },
  methods: {
    handleClick(params) {
      this.product = params;
      console.log(this.product);
    },
  },

//Here is the Api call.
  async created() {
    await axios
      .get(
        `https://api.escuelajs.co/api/v1/categories/${this.product}/products`
      )
      .then((res) => {
        this.stores = res.data;
        console.log(this.stores);
      })
      .catch((e) => {
        console.log(this.errors.push(e));
      });
  },

我希望当我点击一个特定的产品，它会更改为我插入的号码，谢谢

vue.js

来源：https://stackoverflow.com/questions/74944412/how-do-i-make-another-api-call-onclick-in-vue-js

2条答案

按热度按时间

vxf3dgd41#

1.当你使用选项API时不要使用ref，你混淆了选项api和组合api（setup函数）
1.将API调用移到一个方法，并从created和handleClick调用它

export default {
  components: {
    Clothes,
    Shoes,
  },
  data() {
    return {
      product: 1,
      stores: [],
      errors: [],
    };
  },
  methods: {
    fetchProduct(productId) {
      return axios.get(`https://api.escuelajs.co/api/v1/categories/${productId}/products`)
        .then((res) => {
          this.stores = res.data;
        })
        .catch((e) => {
          this.errors.push(e);
          console.error(e);
        });
    },
    handleClick(productId) {
      this.product = productId;
      this.fetchProduct(productId);
    },
  },

  //Here is the Api call.
  async created() {
    await this.fetchProduct(this.product);
  },
};

赞(0）回复(0）举报 2022-12-30

oipij1gg2#

您需要等待同步调用：

const app = Vue.createApp({
  data() {
    return {
      product: 1,
      stores: [],
      errors: [],
    };
  },
  methods: {
    async fetchProduct(productId) {
      await axios.get(`https://api.escuelajs.co/api/v1/categories/${productId}/products`)
        .then((res) => {
          this.stores = res.data;
        })
        .catch((e) => {
          this.errors.push(e);
          console.error(e);
        });
    },
    handleClick(productId) {
      this.product = productId;
      this.fetchProduct(productId);
    },
  },
  async created() {
    await this.fetchProduct(this.product);
  },
})
app.mount('#demo')

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.2.2/axios.min.js" integrity="sha512-QTnb9BQkG4fBYIt9JGvYmxPpd6TBeKp6lsUrtiVQsrJ9sb33Bn9s0wMQO9qVBFbPX3xHRAsBHvXlcsrnJjExjg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div id="demo">
  <button @click="handleClick(3)">get productid 3</button>
  {{stores}}
</div>

赞(0）回复(0）举报 2022-12-30

我来回答

我如何使另一个API调用onclick在vue js

2条答案

相关问题

热门标签

最新问答