vue.jsでページ読み込み後にモーダルを表示したい

Question

vue.jsのモーダルを実装しています。
クリックイベントではなく、ページが表示された際にモーダルを表示させたいのですがうまく表示できません。

テンプレートファイル

// modal.vue
<template>
  <transition>
    <div class="modal-content">
      モーダルの中身
    </div>
  </transition>
</template>

呼び出し先のhtml

<div id="app">
    <div class="modal-overlay">
      <modal v-show="showContent"></modal>
      <button class="btn-close" v-on:click="closeModal">キャンセル</button>
    </div>
  </div>

js

import Modal from './components/modal.vue'

export default new Vue({
  el: '#app',
  components: { Modal },
  data: {
    showContent: false
  },
  methods: {
    window: onload = function () {
      this.showContent = true;
    },
    openModal: function () {
      this.showContent = true
    },
    closeModal: function () {
      window.close()
    }
  }
})

試したこと

window: onloadを使ってみたのですがうまく表示できませんでした。

openModal: function () {
      this.showContent = true
    },

モーダル表示用のボタンを置き、クリックするときちんと表示されます。

どうぞよろしくお願いいたします。

Comments

[nico25]

data: {
// showContent: false
showContent: true
},

でどうでしょうか？

[nana7777]

ありがとうございます。ページにアクセスしてからフェードインさせたいのです＞＜

Answer 1

methods: {
    window: onload = function () {
      this.showContent = true;
    }
  }

これ、window.onloadとごっちゃになってますか？
メソッドで掛かれてるものは呼び出さない限り発火しません。
呼び出し方はthis.メソッド名。

ページ表示時に行いたい処理はcreatedやmountedで書きましょう。

タイミングなどはvueの公式リファレンスのライフサイクルを確認してください。　
丁寧に記載されています。

Comments

[nana7777]

ライフサイクル確認しました！
mountedで書くと動きました。ありがとうございました！

Answer 2

モーダルは最初からshowContentをtrueにして表示させておき、transitionにappear属性を使用して読み込み時にもアニメーションを行うようにすれば良いと思います。

<template>
  <transition appear> <!-- 追記 -->
    <div class="modal-content">
      モーダルの中身
    </div>
  </transition>
</template>

動作デモ →　https://codepen.io/taku-hu/pen/WNbMJvO