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

Question

実現したいこと

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

ソースコード

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

<div id="main">
	<ul>
		<template v-for="value in options">
			<li>
				<label>
					<input type="checkbox" v-model:checked="value.checked">
					<span>{{ value.title }}</span>
				</label>
			</li>
		</template>
	</ul＞
	<button v-on:click="convert()">変換</button>
</div>

const vm = new Vue({
	el: "#main",
	data: {
		options: [
			{title: "A", checked: true, convert: this.convertA},
			{title: "B", checked: true, convert: this.convertB},
			{title: "C", checked: true, convert: this.convertC}
		],
	},
	methods: {
		convert() {
			this.$data.options.filter(element => {
				return element.checked;

			}).forEach(element => {
				element.convert();
			});
		},
		convertA() {
			console.log("ここはAです。");
		},
		convertB() {
			console.log("ここはBです。");
		},
		convertC() {
			console.log("ここはCです。");
		},
	},
});

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

発生している問題

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

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

知りたいこと

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

Answer 1

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

const vm = new Vue({
	el: "#main",
	data: {
		options: [],
	},
	mounted: function(){
		this.$data.options.push(...[
			{title: "A", checked: true, convert: this.convertA},
			{title: "B", checked: true, convert: this.convertB},
			{title: "C", checked: true, convert: this.convertC}	
		]);
	},
	...
});

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

Answer 2

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

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

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

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

const vm = new Vue({
	el: "#main",
	data: {
    options: [
      //convertには仮の関数を代入しておく
      {title: "A", checked: true, convert: ()=>{}},
      {title: "B", checked: true, convert: ()=>{}},
      {title: "C", checked: true, convert: ()=>{}}
    ],
  },
  created() {
    //データが用意された後で改めて代入
    this.options[0].convert=this.convertA;
    this.options[1].convert=this.convertB;
    this.options[2].convert=this.convertC;
  },
  //...
});

ライフサイクルについて、詳しくは下記のサイトを読んでみてください。

• 公式ドキュメント - https://v3.ja.vuejs.org/guide/instance.html#...
• [Vue.js] ライフサイクルをみる( beforeCreate から destroyed まで ) - Qiita - https://qiita.com/ksh-fthr/items/2a9f173c706ef6939f93

Comments

[lookman]

@luuguas さん
ライフサイクルについてを見て、ソースを変更して自己解決しました。コメントありがとうございました。