在打开 v-dialog 之前等待函数完成（axios 调用）

Question

目前，当点击一个按钮时，axios 调用将检索有关特定产品的一些信息并打开，在同一时间，v-dialog 显示所有有关产品的信息。

我想要的行为是 v-dialog 打开仅在 axios 调用完成后。我知道异步函数在这里很有用，但是同一个按钮调用 axios 函数并打开 v-dialog 的事实让我在这里感到困惑。

这是我在模板中的代码：

<v-dialog v-model="productInfoDialog" max-width="600px" :retain-focus="false">
                <template v-slot:activator="{ on, attrs }">
                  <v-btn color="primary" v-bind="attrs" v-on="on" v-on:click="getProductInfo(row.item.id)">View Product</v-btn>
                </template>
                ...dialog content
              </v-dialog>

在脚本中：

closeDialog() {
      this.productInfoDialog = false;
},
getProductInfo(id) {
      var url = this.$store.getters.URLs.Product.url;
      axios.get(url, {
      params: this.getProductParams(id),
      })
      .then((response) => {
        //product info assignment
      })
      .catch((error) => {
        console.log(error.response);
      })
},

在此先感谢您的帮助！ :)

Answer 1

如果得到了你想要的就去做。

closeDialog() {
      this.productInfoDialog = false;
},
getProductInfo(id) {
      var url = this.$store.getters.URLs.Product.url;
      axios.get(url, {
      params: this.getProductParams(id),
      })
      .then((response) => {
        //here the request is completed
        //so you can open your dialog now
        this.productInfoDialog = true;
        this.productInfo.id = id;
        this.productInfo.img_url = response.data.data[0].img_url;
        this.productInfo.ecommerceUrl = response.data.data[0].url_en;
      })
      .catch((error) => {
        this.productInfo.id= '';
        this.productInfo.img_url = '';
        this.productInfo.ecommerceUrl = '';
        console.log(error.response);
      })
}

在打开 v-dialog 之前等待函数完成（axios 调用）

Wait for a function to complete (axios call) before opening v-dialog

javascript

asynchronous

vue.js

axios

vuetify.js