###前提・実現したいこと
Vue.jsで自作した子コンポーネントを親から複数箇所で呼び出しています。
そのうちの1つでだけ値の入力後に独自の処理を行いたいため、
親から子に対してコールバック関数を渡したいです。
コンポーネントの中身はテキストボックスにコードを入れると名称を取得してきて隣に表示するというものです。
コールバックで行いたいのは、名称以外の値も一緒に変更するという処理です。
一緒に変更したい値が18個ぐらいあるので、変更したい側に書くよりコード変更時に処理したいと思っています。
Vue.jsのサイトを見るとpropsの型にFunctionが有ったので渡せるのでは?と思っていたのですが、
色々試してみても文字列になってしまいます。
どうやって関数自体を渡せばいいのでしょうか。
###該当のソースコード
※コンポーネントのソースが長いので、関数が渡せるかどうか試しているテストコードを載せています。
子コンポーネント
js
1var child = { 2 props:{ 3 testFnc : Function 4 }, 5 template: "<input type='text' v-on:change='onChange' />", 6 methods:{ 7 onChange:function(){ 8 this.testFnc("aaaa") 9 } 10 } 11}
親側
js
1window.onload = function(){ 2 new Vue({ 3 el:'#vue_contents', 4 methods:{ 5 setTest: function(msg){ 6 alert(msg); 7 } 8 }, 9 components : { 10 'child':child 11 }, 12 }); 13}
呼び出すところ
html
1<child test-fnc="{{setTest}}"></child>
this.testFncに何が入っているかデバッグツールで覗くと「{{setTest}}」が入っています。
###試したこと
1.呼び出しのところにv-bindを付けないと文字列になるという記載を見つけて
html
1<child v-bind:test-fnc="{{setExtendInfo}}"></child>
にしてみました。
結果、ページ全体が表示されなくなりました。
2.関数を変数に入れて変数名を渡してみました。
js
1var test = function(){ 2 alert("呼べてますか…?"); 3}
無駄な抵抗で呼び出し側でもダブルクォーテーションを取ってみる。
html
1<child test-fnc=test></child>
文字列「test」が渡されました…。
3.そもそも親側でwatchしてコールバックを書いてみる
親のデータとバインドしていたので、親側でデータをwatchしてみました。
js
1 watch:{ 2 testdata:function(newVal, oldVal){ 3 alert("ここがコールバックになる予定"); 4 } 5 },
呼ばれることは呼ばれましたが、1文字入力するごとに呼ばれてしまいます。
入力するコードが長さが決まっていないという仕様なので、入力値の長さでチェックすることもできません。
4.3案でフォーカスが当たっている間は処理しないようにしてみる
暫定でコードを入れるテキストボックスにid="testdata"と名付けました。
js
1 watch:{ 2 testdata:function(newVal, oldVal){ 3 if (document.activeElement.id === "testdata") { 4 return; 5 } 6 alert("ここがコールバックになる予定"); 7 } 8 },
alertが呼ばれることはありませんでした。
よく考えたら最後の文字が入力されたときに呼ばれてもフォーカスはまだ当たりっぱなしなので、当たり前でした…。
###補足情報(言語/FW/ツール等のバージョンなど)
言語:Vue.js 2.2.4
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/12/01 00:08
2017/12/01 05:39