実現したいこと
<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 コメント