【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など)を代入するには、どのようにコードを変更すればよいでしょうか？

回答2件

自己解決

コメントを参考にして、ソースを次のように修正しました。

JavaScript
1const vm = new Vue({
2	el: "#main",
3	data: {
4		options: [],
5	},
6	mounted: function(){
7		this.$data.options.push(...[
8			{title: "A", checked: true, convert: this.convertA},
9			{title: "B", checked: true, convert: this.convertB},
10			{title: "C", checked: true, convert: this.convertC}	
11		]);
12	},
13	...
14});

Vue.jsのライフサイクルに基づき、$elプロパティはmountedまで利用できません。よって、mounted関数内で、optionsに値をバインドしました。

投稿2023/02/07 10:07

lookman

総合スコア4

Vue.jsのライフサイクルをもとに考えると、dataの初期化をおこなうタイミングでは、まだmethods含む種々のデータが揃っていないのだと思います。(あくまで私の推測ですが)

そのため、this.convertAを代入しようとしても、肝心のデータがまだ用意できていないため、代わりにundefinedが代入されているのでしょう。

要は、データの初期化が終わった後であれば、this.convertAがちゃんと用意されているので、正しく代入できるということです。

そこで、データの初期化が終わった直後に呼び出されるcreatedフックを使います。詳しく説明すると、data内のオブジェクトには仮の関数(()=>{}でよいでしょう)を代入しておいて、後からcreated()内でthis.convertAを代入します。

js
1const vm = new Vue({
2	el: "#main",
3	data: {
4    options: [
5      //convertには仮の関数を代入しておく
6      {title: "A", checked: true, convert: ()=>{}},
7      {title: "B", checked: true, convert: ()=>{}},
8      {title: "C", checked: true, convert: ()=>{}}
9    ],
10  },
11  created() {
12    //データが用意された後で改めて代入
13    this.options[0].convert=this.convertA;
14    this.options[1].convert=this.convertB;
15    this.options[2].convert=this.convertC;
16  },
17  //...
18});