Vue.jsで変数の中身の文字列を変数名として使用したい

Question

お世話になっております。
表題の件について知りたくて投稿しました。

<span v-on:click="func('arrA')">クリックA</span>
<span v-on:click="func('arrB')">クリックB</span>


<script>
 export default{
  methods:{
   func:function(arr){
    this.??? = 1;
    this.$data.??? = 1;

    //動作的には以下のようにしたい(クリックAをクリックした場合)
    this.arrA = 1;
    this.$data.arrA = 1;
   }
  }
 }
</script>

おわかりになる方いらっしゃいましたらよろしくお願いします

Answer 1

jsでは、以下のようにすると動的にプロパティーにアクセスできます。

let propName = 'something'
b[propName] // -> b.something と同じ
propName = 'otherthing'
b[propName] // -> b.otherthing と同じ

なので、この場合は、

function(arr){
    this[arr]= 1;
    this.$data[arr] = 1;
}

とすると良いと思います。data() { return { 'arrA': null, 'arrB': null } }もあるとより確実に動くと思います。