【vue】親コンポーネントにbindしているpropの値がwatch出来ない。

親コンポーネントから子コンポーネントのメソッドを実行したいのですが、子コンポーネントの指定ができず、子コンポーネントのメソッドが実行できません。
具体的には、子コンポーネントにrefを指定しても、undifindが帰ってきます。

親から子コンポーネントの関数を実行することが出来ないことがわかりました。
vueの方針として、propの状態変化でイベントを起こすことを推薦しているようなので、propの監視で対応しようと考えました。

なんども申し訳ありません。
できる様です。

ただ、私の場合だと、というエラーが出てしまい、methodsに登録してるメソッドを読むことが出来ず、
発火できません。

Error in mounted hook: "TypeError: Cannot read property 'メソッド名' of undefined"

監視にwatchを使ってみようと考えたのですが動きません。
propに対して、watchを起動させるにはどうしたらよいでしょうか？

親コンポーネント

親コンポーネントで、changeCompchangeCompをい実行するとalertが発火する想定。

記述ミスがあったため修正します。
実際のコードから抜粋しているので、設定を書き忘れていた箇所がありました。

vue
1<template">
2    <child-component ref="child" v-bind:is-comp="this.$data.isComp"></child-component>
3</template>
4
5<script>
6import child-component from 'child-component'
7export default {
8    methods: {
9        data() {
10            return {
11                isComp: false
12            }
13        },
14        components {
15             child-component
16        }
17        initializeChild() {
18            const { child } = this.$refs
19            // 子コンポーネントを呼ぶ
20            child.reset();
21        },
22        changeComp() {
23            this.$data.isComp = true
24        }
25    }
26    mounted() {
27        initializeChild();
28    }
29}
30</script>

子コンポーネント

vue
1<template">
2<div class="chilid-container">
3    <p>子コンポーネント</p>
4</div>
5</template>
6
7<script>
8export default {
9    prop['isComp'],
10    watch: {
11        isComp: function(val) {
12             this.reset()
13        }
14    }
15    methods: {
16        reset() {
17            console.log('reset')
18        }
19    }
20}
21</script>

試した事

propではなく、同じコンポーネントのdataの値を設置してみた
-> 反応しない。

euledge

2018/11/02 00:14

https://teratail.com/questions/88988 に同様の質問があるようです。作法的にはpropsで渡したものを子供が反応するのが正攻法です。

hasshy

2018/11/02 00:50

情報をご共有いただきありがとうございます！なるほど、refが効かない件理解できました。検討してみます。

退会済みユーザー

2018/11/02 08:21 編集

回答に差し替えました。

退会済みユーザー

2018/11/02 08:23

念のための確認ですが、<child-component ...の部分って、ブラウザで確認して、<p>に変わっていますか？

hasshy

2018/11/02 08:35

度々申し訳ありません、divで囲んでいる処理が抜けていました。pタグは出力されます。

hasshy

2018/11/02 08:35

度々申し訳ありません、divで囲んでいる処理が抜けていました。pタグは出力されます。

退会済みユーザー

2018/11/02 09:02

いえいえ、全然大丈夫です。コンポーネントはうまく置き換わっているぽいですね。

hasshy

2018/11/02 09:07

ありがとうございます。なんとなくわかってきました。もしかしたら、mountedのタイミングで実行しようとしたのが問題かもしれません。

行動規範の内容に同意します

回答1件

ベストアンサー

watchの場合(追記)

DEMO - JSFiddle

html
1<style>
2  #app {
3    background: salmon;
4    width: 200px;
5  }
6  textarea {
7    height: 300px;
8  }
9  .childcomp {
10    background: gray;
11    width: 100px;
12    height: 100px;
13  }
14</style>
15<body>
16  <div id="app">
17    <button v-on:click="increment">increment</button>
18    <childcomp ref="child" v-bind:count="state.count"></childcomp>
19    <textarea>{{ state.log }}</textarea>
20  </div>
21  <script>
22    let state = { log: '', count: 0 };
23
24    Vue.component('childcomp', {
25      props: ['count'],
26      template: `
27        <div class="childcomp">
28          <button v-on:click="increment">increment</button>
29          <div>{{ count }}</div>
30        </div>
31      `,
32      methods: {
33        increment: function() {
34          state.count += 1;
35        },
36      },
37      watch: {
38        count: function() {
39          state.log += 'on counted!\n';
40        }
41      }
42    });
43
44    vm = new Vue({
45      el: '#app',
46      data: { state },
47      methods: {
48        increment: function(event) {
49          state.count += 1;
50        },
51      },
52    });
53  </script>
54</body>

$ref['child']の場合

試してたら、this.$refs['child'].someMethod(); でいけました。ただ、試している中で、this.$refs['child'][0].someMethod(); でいけたこともあって、すこし謎です。

DEMO - JSFiddle

html
1<style>
2  #app {
3    background: salmon;
4    width: 200px;
5  }
6  textarea {
7    height: 300px;
8  }
9  .childcomp {
10    background: gray;
11    width: 100px;
12    height: 50px;
13  }
14</style>
15<body>
16  <div id="app">
17    <button v-on:click="say">say(parent)</button>
18    <button v-on:click="say2">say2(child from parent)</button>
19    <div>
20      <childcomp ref="child"></childcomp>
21    </div>
22    <textarea>{{ state.log }}</textarea>
23  </div>
24  <script>
25    let state = { log: '' };
26
27    Vue.component('childcomp', {
28      props: ['post'],
29      template: `
30        <div class="childcomp">
31          <button v-on:click="say">say(child)</button>
32        </div>
33      `,
34      methods: {
35        say: function(event) {
36          state.log += 'i am child.\n';
37        }
38      }
39    });
40
41    vm = new Vue({
42      el: '#app',
43      data: { state },
44      methods: {
45        say: function(event) {
46          state.log += 'i am parent.\n';
47        },
48        say2: function(event) {
49          this.$refs['child'].say(null);
50        },
51      },
52    });
53  </script>
54</body>

投稿2018/11/02 07:48

編集2018/11/02 08:36

退会済みユーザー

総合スコア0

hasshy

2018/11/02 08:24

いつもありがとうございます！色々ご指摘いただきありがとうございます。色々、テンパっていて色々抜けてしまっていました。 importとcomponentsの設定はしています。ただ、自分が開発したアプリでは、下記のエラーが出てしまい実行が出来ないのですよね… > Error in mounted hook: "TypeError: Cannot read property 'メソッド名' of undefined" あと教えていただいた、配列の0番目を指定する方法でも、 > TypeError: Cannot read property '0' of undefined" となってしまい、0番目がみつからない状態でした… console.logを見ると、情報は入っている様なのですが…

退会済みユーザー

2018/11/02 09:05

私もJSFiddleで試しているときに、似たような状況に陥りました。で、['child'][0]でうまくいったり、['child']でうまくいったり、うまくいってもメソッドがなかったり…とか。憶測でしかないのですが、どっか記述におかしなところがあってmethodsをVueが認識できてなかったのか…?と思ったり。結局なにが原因だったかわかりませんでした。

hasshy

2018/11/02 09:10 編集

度々ご指摘ありがとうございます。ご共有までに、色々調べていてきになることが出てきまして。　ソースでは省略してしまい恐縮ですが、v-ifで初回は非表示になっていたことと、mountedのタイミングで実行したことが原因になっていそうな気がしてきました。

退会済みユーザー

2018/11/02 09:15

わかりました、ご解決願ってます。ちゃんと動く確認するのに、一旦、極小規模のデモを実装して確認することで問題の切り分けが出来たりするのでおすすめです。

hasshy

2018/11/02 09:18

いつもありがとうございます。おさわがせしてしまい申し訳ありません。 > 一旦、極小規模のデモを実装して確認することで問題の切り分けが出来たりするのでおすすめです。確かにそうですね。組み込みすぎて、大きくなりすぎてしまったかもしれません。

行動規範の内容に同意します