vue.js ちょっと気づき

今気づいたバッドプラクティスについてまとめ

v-forで要素作って、クリックされた要素の画像を変えるってものを作ろうとしたとき
$event.target.srcを変えてたんだけどこれはDOMにアクセスしてるから良くないんだろうね。
実際読みづらいし。

srcに入れるようのデータを用意してそれをいじるようにしよう

//Bad
    <img v-for="(n,idx) in [0,1,2]" :key="idx" 
         src="../assets/img/hoge.png" 
         @click="openBox($event,idx)">

  methods:{
    openBox(e,idx) {
      e.target.src = require(`../assets/img/piyo.png`)
    },
  }

//Good
    <img v-for="(n,idx) in [0,1,2]" :key="idx" 
         :src="imgUrl[idx]" 
         @click="openBox(idx)">

  data() {
    return {
      imgUrl:Array(3).fill(require('../assets/img/hoge.png')),
    }

  methods:{
    openBox(idx) {
      this.imgUrl[idx] = require(`../assets/img/piyo.png`)
    },
  }

DOMではなくdataをいじる
これがデータ駆動型ってことか。