2017-01-03 4 views
1

したがって、bindフックトリガーの下にあるコードをロードすると、componentUpdatedフックはコンポーネントのクラスにもかかわらず実行されないように見えますが、コンポーネントは中立から「含む」に変更されます。添付されたディレクティブを持つコンポーネントのインスタンスがクリックされた場合でも、なぜアップデートが実行されないのかを誰かが知ることができますか?Vue.jsカスタムディレクティブはcomponentUpdatedフックを実行していませんか?

HTML

<ternary-toggle display-text="Broken" v-ternary="'baz'"></th> 

JS

Vue.directive('ternary', { 
    bind: function(el, binding) { 

     var instanceName = JSON.stringify(binding.value); 
     if (this['_' + instanceName] == undefined) { 
      this['_' + instanceName] = {}; 
     } 
    }, 
    componentUpdated: function(el, binding) { 
     var instanceName = JSON.stringify(binding.value); 
     console.log(instanceName); 
    } 
}); 

var ternaryToggle = Vue.component('ternary-toggle', { 
    props: ['displayText'], 
    data: function() { 
     return { 
      state: 'neutral', 
      stateTransitions: { 
       neutral: 'include', 
       include: 'exclude', 
       exclude: 'neutral' 
      } 
     } 
    }, 
    methods: { 
     toggle: function() { 
      this.state = this.stateTransitions[this.state] 
      this.$emit('switched', this.state) 
     } 
    }, 
    template: '<span v-bind:class="state + \' btn btn-small\'" v-on:click="toggle">{{ displayText }}</span>' 
}); 
+1

この回答をお探しですか? – Jeppebm

+0

@Jeppebm私はちょうど私が代わりに使ったことを投稿しました。 – BWStearns

答えて

0

これは非常に適切に質問に答えていません(このソリューションが働いた理由を思い出すことができない)が、それは@Jeppebmを支援しようとする試みです。だから私は正確な理由を思い出すことはできませんが、以下は私がなってしまった何だった:

var ternaryToggle = Vue.component('ternary-toggle', { 
    props: ['displayText', 'toggleId'], 
    data: function() { 
     return { 
      state: 'neutral', 
      stateTransitions: { 
       neutral: 'include', 
       include: 'exclude', 
       exclude: 'neutral' 
      } 
     } 
    }, 
    methods: { 
     toggle: function() { 
      this.state = this.stateTransitions[this.state] 
      this.$emit('switched', this.toggleId, this.state) 
     } 
    }, 
    template: '<span v-bind:class="state + \' btn btn-small\'" v-on:click="toggle">{{ displayText }}</span>' 
}); 

は私が来た全体的な結論はちょうどこの努力のためのカスタムディレクティブを捨てに行ったことがあるかもしれないと思います。

関連する問題