vue-good-tableの検索ボックスに前回の検索キーワードを入れる

vue-good-tableの検索ボックスに、ローカルストレージなどに保存しておいた前回の検索キーワードを入れておく方法です。

環境

• Vue.js 2.6.11
• vue-good-table 2.16.3

HTML

vue-good-tableタグ内のrefで任意の名前を与えます。

<vue-good-table
  ref="my-table"
  :columns="columns"
  :rows="rows"
  :search-options="{
    enabled: true
  }">
</vue-good-table>

Vue.js

mountedで先ほど名前を与えたコンポーネントを取得し、そのglobalSearchTermにローカルストレージなどから取得した前回の検索キーワードを渡します。ここでは「my initial value」を代入しています。

// in js
mounted() {
  this.$refs["my-table"].globalSearchTerm = "my initial value";
}

サンプル

See the Pen vue-good-table initial global search by Kamiyama (@MtDeity) on CodePen.

参考

Global Search reset · Issue #452 · xaksis/vue-good-table