【Vue.js】dataの配列にmethodsの関数式を代入したい

実現したいこと

<input type="checkbox">で選択された要素に紐づく関数のみを、実行したいです。

ソースコード

次のような、「変換」ボタンを押したときにcheckboxで選択された関数のみを実行するコードがあります。

html

1<div id="main">2 <ul>3 <template v-for="value in options">4 <li>5 <label>6 <input type="checkbox" v-model:checked="value.checked">7 <span>{{ value.title }}</span>8 </label>9 </li>10 </template>11 </ul>12 <button v-on:click="convert()">変換</button>13</div>

JavaScript

1const vm = new Vue({2 el: "#main",3 data: {4 options: [5 {title: "A", checked: true, convert: this.convertA},6 {title: "B", checked: true, convert: this.convertB},7 {title: "C", checked: true, convert: this.convertC}8 ],9 },10 methods: {11 convert() {12 this.$data.options.filter(element => {13 return element.checked;14 15 }).forEach(element => {16 element.convert();17 });18 },19 convertA() {20 console.log("ここはAです。");21 },22 convertB() {23 console.log("ここはBです。");24 },25 convertC() {26 console.log("ここはCです。");27 },28 },29});

ここでは説明のために簡略化していますが、"convertA~C"関数は本来、まったく異なる挙動をします。

発生している問題

16行目のelement.convertで「is not a functionエラー」が生じて、関数が実行できません。開発者ツールで確認するとelement.convert = undefinedでした。おそらくdataを定義するときに、関数式が代入されていないのだと思います。

一方で、convert関数内でconsole.log(this.convertA)を確認したところ、ƒ () {...}という望んだ結果が得られています。

知りたいこと

dataに、methodsで定義した関数(convertAなど)を代入するには、どのようにコードを変更すればよいでしょうか?

コメントを投稿

0 コメント