vue.jsで動的に書き出したバナーをマウスオーバーするとズームアップさせたいが、うまく動作しない

Question

お世話になっております。
表題の件を実行したいのですが、うまく動作しません

下記の処理で<img>の部分をマウスオーバーすると
{{ banner_zoom_flag[banner_per_block * key + key_img] }}
の部分が更新されません(trueが表示されない)。なお
{{ banner_per_block * key + key_img }}
には正しい数値が表示されます。結果からすると
banner_zoom_flag[banner_per_block * key + key_img]
が更新されていない、又は更新はされていてもDOMの部分に伝わっていないかと思われますが、おわかりになる方いらっしゃいましたらよろしくお願いします。

<div
  class="banner_block"
  v-for="(event_list, key) in event_list_block"
  :key="key"
>
  <span v-for="(event, key_img) in event_list" :key="key_img">
    {{ banner_per_block * key + key_img }}:
    {{ banner_zoom_flag[banner_per_block * key + key_img] }}
    <img
      :src="event.banner_uri"
      v-on:mouseover="mouseover_image(banner_per_block * key + key_img)"
      v-on:mouseout="mouseout_image(banner_per_block * key + key_img)"
      v-bind:class="{
        banner_zoom: banner_zoom_flag[banner_per_block * key + key_img],
      }"
    />
  </span>
</div>

data() {
  return {
    //バナーを1ブロックにいくつ表示するか
    banner_per_block: 4,
    //バナーをズームアップ表示するかフラグ
    banner_zoom_flag: [],
  };
},

mouseover_image: function (key) {
  this.banner_zoom_flag[key] = true;
},

.banner_zoom {
  position: absolute;
  width: 100% !important;
  height: 100% !important;
  z-index: 20 !important;
}

Comments

[surface_0]

CSSでマウスオーバー時の見た目変化を与えるのが実質的な目的ではなく、
マウスオーバーイベントをVueにかませて何かをしたいというのが目的でしょうか？
単にクラスのオンオフだけならCSSだけで達成できる程度の事では？と思ったのでお聞きしました。

[kutu]

はい。
マウスオーバーイベント時にvueで判断して、様々な動作(今回の例ではCSSの付与)を行おうとしたのですが、ますオーバーの瞬間に
・banner_zoom_flag[banner_per_block * key + key_img]
の値が切り替わるということが発生せず、CSSの即座の切り替えができませんでした。

[surface_0]

わかりました。
event_list_block の内容例を提示していただけませんか？

Answer 1

データ内容をいただいてから答え合わせしようかと思いましたが、原因はほぼ明確だと思うので先に回答してしまいます。

配列の変更は検知できないパターンがあります。
リアクティブの探求 — Vue.js

mouseout_image()は次のようになっていると想定した場合の解決方法を以下に挙げます。

mouseover_image: function (key) {
  this.banner_zoom_flag[key] = false;
},

例1 配列を初期化しておく

配列の要素が増減しないのであれば、data()で先にbanner_zoom_flagの中身を初期化しておきます。

        data() {
          const event_list_block = [
            // 省略
          ];
          const banner_per_block = 4;
          const banner_zoom_flag = [];
          
          event_list_block.forEach((event_list, key) => {
            event_list.forEach((event, key_img) => {
              banner_zoom_flag[banner_per_block * key + key_img] = false;
            });
          });

          return {
            banner_per_block,
            event_list_block,
            banner_zoom_flag,
          };
        },

例2 Vue.set()を使う

Vue.set()を使えば明示的に更新を促せます。

        methods: {
          mouseover_image: function (key) {
            this.$set(this.banner_zoom_flag, key, true);
          },
          mouseout_image: function (key) {
            this.$set(this.banner_zoom_flag, key, false);
          },
        },

蛇足

引数に真偽値も含めれば関数は一つで済みます。

<img
  :src="event.banner_uri"
  v-on:mouseover="mouseover_image(banner_per_block * key + key_img, true)"
  v-on:mouseout="mouseover_image(banner_per_block * key + key_img, false)"
  v-bind:class="{ banner_zoom: banner_zoom_flag[banner_per_block * key + key_img] }"
/>

mouseover_image: function (key, flag) {
  this.$set(this.banner_zoom_flag, key, flag);
},