【Laravel6 + Vue.js】v-ifでモーダルを制御しようとしているが、常に表示されてしまう。

Question

Laravel6とVue.jsで非同期のCRUDアプリの制作に取り組んでおります。
削除ボタンを押してモーダルの確認画面を表示させようと思っていますが、
常にモーダルが出現した状態になり、解決できず困っております。

index.blade.php

  <table class="table justify-content-center text-nowrap table-striped" id="group">
    <tr>
      <th>グループ名</th>
      <th>所属数</th>
      <th> </th>
    </tr>
    <tbody>
    <tr v-for="(group, index) in groups" v-bind:key="index">
      <td>@{{ group.name }}</td>
      <td> </td>
      <td>
        <div class="edit-delete">
          <form action="/group/edit/group.id" method="get">
          @csrf
          <input type="submit" value="編集" class="mr-1 edit btn btn-info">
          </form>
          <button class="delete btn btn-info" v-on:click="openModal">削除</button>
        </div>
      </td>
    </tr>
    </tbody>
      <div v-if="showContent">
        <div id="overlay">
          <div id="content">
            <p>これがモーダルウィンドウです。</p>
            <button v-on:click="closeModal">Close</button>
          </div>
        </div>
      </div>
  </table>

new Vue({
  el: '#group',
  data: {
    showContent: false,
    groups: [],
  },
  methods: {
    deleteRow: function(id,index){
      axios.post('http://192.168.56.101/api/group/delete/' + id)
        .then(response => {
          console.log(index)
          this.groups.splice(index,1)
        })
    },
    openModal: function(){
      console.log(showContent)
      this.showContent = true
    },
    closeModal: function(){
      this.showContent = false
    }
  },
  mounted () {
    axios.get('http://192.168.56.101/api/group').then(response => { 
      console.log(response.data.groups);
      this.groups = response.data.groups;
    })
  }
});

##試したこと
画面表示されているcloseボタンも効かないため、モーダル部分をコメントアウトして、削除ボタンを押すと下記エラーになります。
[Vue warn]: Error in v-on handler: "ReferenceError: showContent is not defined"

dataでshowContent: falseを定義していますが、これが定義されていないと見なされているため、v-if="showContent"でもモーダルが表示されてしまうようです。
この原因は何故でしょうか？

お知恵をお貸しいただければ幸いです。
よろしくお願い致します。

Comments

[q_sane_q]

ReferenceErrorが出るのは

console.log(showContent)
でthisがついていないからではないでしょうか？

[keimae]

ReferenceErrorが出る原因は仰る通り、thisが付いていないからでした。
ありがとうございます。

Answer 1

tableタグをdivタグで囲み、そのdivタグをid="group"とし、モーダルのコードをtableタグの外に書くことで、モーダルの制御ができるようになりました。

  <div class="table-responsive-sm" id="group">
    <table class="table justify-content-center text-nowrap table-striped" >
      <tr>
        <th>グループ名</th>
        <th>所属数</th>
        <th>aaa</th>
      </tr>
      <tbody>
      <tr v-for="(group, index) in groups" v-bind:key="index">
        <td>@{{ group.name }}</td>
        <td>@{{ group.members.length }}</td>
        <td>
          <div class="edit-delete">
            <form action="/group/edit/group.id" method="get">
            @csrf
            <input type="submit" value="編集" class="mr-1 edit btn btn-info">
            </form>
            <button class="delete btn btn-info" v-on:click="openModal">削除</button>
          </div>
        </td>
      </tr>
      </tbody>
    </table>
    <div v-if="showContent">
      <div id="overlay">
        <div id="content">
          <p>これがモーダルウィンドウです。</p>
          <button v-on:click="closeModal">Close</button>
        </div>
      </div>
    </div>
  </div>

Answer 2

まず回答の前提として、私はLaravelを一度も触ったことがなく知識の抜けや見当違いなところがある可能性があります。
その上で

vueの動作はとりあえずHTMLが書かれてから始まると思いま
す。
なので、v-ifでモーダル部分の表示を判定する前にまず表示されてしまって居るのだと思います。
（そのあたりのLaravelの動きはわかりません、すいません）
vueの表示判定を先行させるなら、ぱっと思いつくのはモーダルの部分をコンポーネント化し、コンポーネントのタグにv-ifをつけるというのはどうでしょうか。

Comments

[keimae]

コンポーネント化せずにやってみたいという思いがありました。
ReferenceErrorのご指摘ありがとうございました。

Answer 3

dataは関数でなければいけないと思います。
これが原因かはわかりませんが、修正してみてください。

data: function () {
  return {
    showContent: false,
    groups: [],
  }
}

Comments

[keimae]

アドバイスいただいたコードに置き換えましたが、同様にモーダルが出てしまい変わりありませんでした。
引き続き自分でも原因を調査しています。

[plasticgrammer]

thisを付けても同じでしょうか。
<div v-if="this.showContent">

[keimae]

thisを付けましたが、変わりありませんでした。
何度もありがとうございます。