【Vue.js】検索フォーム入力時・非入力時の表示変更について

Question

前提

Vue.jsを使ったdataオブジェクトからデータを取得するリアルタイム検索機能を持つアプリを開発中です。

###環境
・Vue 2
・vue@cli 4.5.9
・Vuetify 2.4.0

やりたいこと

v-if,v-elseを使って以下のようにパターン１、２の場合分けで描写をしたいです。

・パターン１：検索フォームに文字入力がない(true)場合は画像１のように「注意書き」を表示

画像１

・パターン２：検索フォームに文字入力がある(false)場合は画像２のように「検索結果」を表示

画像２

該当のソースコード

<template>
・
・
  <v-text-field
   v-model="keyword"
   label="キーワードを入力"
   type="text"
   ></v-text-field>
・
・
  <v-container v-if="toggle">・・・パターン１＝「注意書き」
   <v-card class="grey lighten-5 text-center">
   「フリーワード検索」にキーワードを入力後
    <br>ここに検索結果が表示されます。
   </v-card>
  </v-container>

  <v-container v-else>・・・パターン２＝「検索結果」
・
・
  </v-container>
・
・
</template>

<script>
export default {
  data:() => ({
    toggle:true,←初期値＝パターン１＝「注意書き」
    keyword: '',
・
・
  checkResult(toggle){
   if(
                            )←ここに「keyword(or text)が空白である場合」の式を記述
    return true,
    else(
                            )←ここに「keyword(or text)が空白でない場合」の式を記述
    return false
    }
・
・
</script>

困っていること(＝教えて頂きたいこと)

・methods内checkResult計算式のコード記述方法がわからず、ご教示いただけますでしょうか。
⇒考え方詳細は下記に記載しました。
・checkResult計算式のHTML側への反映方法がわからず、ご教示いただけますでしょうか。
⇒使用するディレクトリはv-onなのか、v-bindなのか。どれを使ってもエラーが出てしまいます。

考えたこと

checkResult計算式の記述内容は以下の通り考えました。
「もしkeyword(or text) === ""(空白)である場合、toggle：true(＝「注意書き」を表示)となる」
「それ以外(keyword(or text) !=== "")である場合、toggle：false(＝「検索結果」を表示)となる」

わかりずらい質問文となっており大変申し訳ございませんが
どうかご教示いただけますと幸いです。

Answer 1

ウォッチャを利用して、データオブジェクトkeywordを監視し、
keyword === ""　の場合、toggle に true(注意書き)
keyword !== ""　の場合、toggle に false(検索結果)
を代入すると良いと思いました。

ご参考になれば幸いです。

data:() => ({
  toggle:true,
  keyword: '',
}),
watch: () => ({
  keyword: (newKeyword, oldKeyword) => { // ウォッチャで keyword を監視します。
    if (newKeyword === "") {
      // 注意書きの場合の処理
      this.toggle = false;
    } else {
      // 検索結果の場合の処理
      this.toggle = true;
    }
  }
})