Vueでリロードを表現する２つの方法

はじめに

jQueryや生のJSでは、ページ内の要素が持っているデータを初期化するのに、よくリロードさせていましたが、Vueだとどう表現すべきなのかやってみました。

1. 変数の初期化

ページ内で使用する変数に初期値を与える事で疑似リロードを表現できます（検索ページのリセットでも使う方法）

例）
<template>
  <p><input v-model="params.text"></p>
  <p class="btn" @click="reset()">リセット</p>
</template>
<script>
export default {
  data: function () {
    return {
      params: {
        text: ''
      }
    }
  },
  methods: {
    reset: function () {
      this.params = {}
    }
  }
}
</script>

ボタンクリック時にparamsを初期化するメソッドを用意することで疑似リロードを表現できます。
ただ、API等でデータを取得している場合やGETでデータを取得している等が初期表示で必要であるとこのメソッドでは対応しきれなくなります。

2. router.goを利用

vue-routerをインストールしている環境であればrouterメソッドが使用できるかと思います。
その中でrouter.goを使用することで想定していたリロードを表現できます。

例）
<template>
  <p><input v-model="params.text"></p>
  <p class="btn" @click="reset()">リセット</p>
</template>
<script>
export default {
  data: function () {
    return {
      params: {
        text: ''
      }
    }
  },
  methods: {
    reset: function () {
      this.$router.go({path: this.$router.currentRoute.path, force: true})
    }
  }
}
</script>

currentRoute.pathで現在のパスを渡す事でリロード処理をしてくれる模様。
vue-routerのAPIリファレンスでは数字を引数としていたgoメソッドですが、オブジェクトを渡せるようなので、他のメソッドでも色々できそうな予感。こういうのどうやって調べるんだろう。。。

以上、リロードを表現する２つの方法でした！