無法在 setTimeout 回調中以編程方式打開 Vuetify 對話框

Question

默認情況下， Vuetify對話框的顯示由切換dialog布爾變量值的按鈕控制。

我假設以編程方式更改此變量的值將允許顯示或隱藏對話框，但事實並非如此。 為什么不？

這是我的代碼：

<template>
  <div>
    <v-dialog v-model="dialog">
      <v-card>
        Dialog content
      </v-card>
    </v-dialog>
  </div>
</template>

<script>

export default {
  data() {
    return {
      dialog: false
    }
  },
  mounted() {
    console.log(this.dialog);
    setTimeout(function() {
      this.dialog = true;
      console.log(this.dialog);
    }, 2000);
  }
}
</script>

控制台顯示false頁面加載，那么true 2秒后。 但是對話框仍然沒有出現......

Answer 1

您應該使用箭頭函數()=>作為setTimeout回調：

  mounted() {
    console.log(this.dialog);
    setTimeout(()=> {
      this.dialog = true;
      console.log(this.dialog);
    }, 2000);
  }

請參閱 boussadjra ( @boussadjra ) 在CodePen上的 Pen Vuetify Dialog 示例。

Answer 2

您在調用 setTimeout 函數內的變量時遇到了一些麻煩。

嘗試這個：

<template>
  <div>
    <v-dialog v-model="dialog">
      <v-card>
        Dialog content
      </v-card>
    </v-dialog>
  </div>
</template>

<script>

export default {
  data() {
    return {
      dialog: false
    }
  },
  mounted() {
    that = this
    console.log(this.dialog);
    setTimeout(function() {
      that.dialog = true;
      console.log(that.dialog);
    }, 2000);
  }
}
</script>

嘗試從相關問題中閱讀此答案，並在匿名函數中調用它