2017-06-16 13 views
1

FB.XFBML.parse()を呼び出すには、更新時にコンポーネントを再レンダリングする必要があります。しかし、私が何をしていても、プロパティが更新されたときにライフサイクルのフックを呼び出すことができません。beforeUpdate/updateddocsによると、それはpropsが明らかにそうでないdata更新を聴くだけです)。VueJS 2.0 - 小道具の更新でコンポーネントをフックできません

<template> 
    <div> 
    {{myProp}} 
    </div> 
</template> 

<script> 
    export default { 
    props: ['myProp'], 

    watch: { 
     myprop: function(newVal, oldVal) { // watch it 
      console.log('Prop changed: ', newVal, ' | was: ', oldVal) 
     }   
    }, 

    updated(){ // never invoked}, 

    beforeUpdate(){ // never invoked } 

    } 
</script> 

私は親コンポーネントから別の値を送信するときに、プロパティchannelが変更されたことを見ることができます。

propsの変更をリッスンするフックはありますか?

更新

@クリスが示唆したように、私は私の財産をwatchしようとしたが、何も変わっていません。私は親コンポーネントがchildコンポーネントに受けることmyProp渡してい

<template> 
    <child :my-prop="myProp"></child> 
</template> 

<script> 
    export default { 
     props: ['myProp'] 
    } 
</script> 

:それから私は、私は特別なケースを持っていることに気づきました。その後、watch: {myProp: ...}は機能しません。あなたが探していることはwatchある

+0

私は、コンポーネントレベルで小道具の変異が望ましい動作ではないと信じています。小道具は片方向(親から子供へ)に流れるように意図されています。別の方法は、小道具に基づいて計算されたプロパティを作成し、それを監視することでしょうか? https://vuejs.org/v2/guide/components.html#One-Way-Data-Flow – dispake

+0

@dispake、私は 'myProp'を変更する必要はありません。私はそれがいつ変わったかを知る必要があります。新しい 'myProp'が"上位 "(親だけでなく)のコンポーネントから送られたとき。 – zatziky

+0

私は小道具がすべて子供の下に流れて、子供の中で時計を見ることを期待します。あなたのユースケースを実証するjsfiddleをセットアップできますか? – Chris

答えて

1

<script> 
    export default { 
    props: ['channel'], 

    watch: { 
     channel(newValue) { 
     console.log(newValue) 
     } 
    } 
    } 
</script> 
+0

クリス、提案のためのthx。私はそれに応じて私の質問を更新しました。 – zatziky

関連する問題