我如何在 vue.js 中拨打另一个 Api 电话 onclick

Question

I am new to vue.js and i have this component, i am trying to make another API call on click of one of the list options.

 <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)); }); },

I want that when i click for a particular product it changes to the number i inserted, Thanks

Answer 1

1. Don't use ref when you use the option api, you're mixin up option api and composition api (the setup function)

2. Move your api call to a method and call it from both created and 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);
  },
};

Answer 2

You need to wait for sync call:

 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>