Vue.jsでv-on:clickの引数をmethods内で使用したいがうまくいかない

Question

前提・実現したいこと

Vue.jsでv-on:click=""の引数をmethodsに送り、使用したいのですがうまくいきません。
【実現したい流れ】
赤、青、緑の3つのボタンとパネルがあり、ボタンを押すとその色と同じパネルが出現する。

どうかご教授お願い致します。

該当のソースコード

<template>
  <div>
    <button @click="panelMethods(redPanel)"></button>
    <button @click="panelMethods(bluePanel)"></button>
    <button @click="panelMethods(greenPanel)"></button>

    <div v-show="redPanel"></div>    
    <div v-show="bluePanel"></div>    
    <div v-show="greenPanel"></div>    
  </div>  
</template>

export default {
data(){
    return{
      redPanel: false,
      bluePanel: false,
      greenPanel: false
    }
  },

  methods:{
    panelMethods(value){
      this.value = !this.value
    }
  }

補足情報（FW/ツールのバージョンなど）

【vue cli】v4.3.1

Answer 1

この書き方の引数のvalueとthis.valueは別々の変数です。引数のvalueは使用されておらず、またthis.valueというプロパティは定義されていないため正常に動作しません。

panelMethods(value) {
  this.value = !this.value
}

このような場合はテンプレートでプロパティの値そのものをメソッドに渡すのではなく、プロパティ名を渡す方法があります。

<button @click="panelMethods(redPanel)"></button>

  ↓ 文字列でプロパティ名を渡す

<button @click="panelMethods('redPanel')"></button>

そしてpanelMethodsメソッドの方はプロパティ名をもとにbooleanの反転を行うようにします。これで期待通りの動作をすると思います。

panelMethods(propName) {
  if (propName === 'redPanel') {
    this.redPanel = !this.redPanel
  } else if (propName === 'bluePanel') {
    this.bluePanel = !this.bluePanel
  } else if (propName === 'greenPanel') {
    this.greenPanel = !this.greenPanel
  }
}

上記の書き方はもう少し簡略化することができます。
dataで定義するプロパティはthis['プロパティ名']のようにアクセスできるので、このように書き直すことができます。

methods: {
  panelMethods(propName){
    this[propName] = !this[propName]
  }
}

下記に動作確認したコードを提示します。

<template>
  <div>
    <button @click="panelMethods('redPanel')">red</button>
    <button @click="panelMethods('bluePanel')">blue</button>
    <button @click="panelMethods('greenPanel')">green</button>
    <div v-show="redPanel">RED</div>
    <div v-show="bluePanel">BLUE</div>
    <div v-show="greenPanel">GREEN</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      redPanel: false,
      bluePanel: false,
      greenPanel: false
    }
  },
  methods: {
    panelMethods(propName){
      this[propName] = !this[propName]
    }
  }
}
</script>

もう1つの解決方法としてclickイベントでプロパティの値を反転する方法があります。この場合はpanelMethodsメソッドは不要です。

<button @click="redPanel = !redPanel">red</button>
<button @click="bluePanel = !bluePanel">blue</button>
<button @click="greenPanel = !greenPanel">green</button>

Comments

[grimro92]

とても丁寧な回答・解説ありがとうございます。なるほど、dataのプロパティにはthis['プロパティ名']とアクセスするのですね...勉強になりました。