Vuejsローカルディレクティブは、呼び出しメソッドを渡すときにデータにバインドしません。

Question

vuejsディレクティブをローカルに定義すると、ローカルにバインドされているときにメソッドを呼び出すときに問題が発生します。

問題：タブ/入力で、値をルックアップし、戻って来るものに基づいて設定します（つまり、setTimeoutは偽のhttp呼び出しです）。設定されたタイムアウトが完了すると、計算プロパティを更新します。

マイグレーションドキュメントでは、指示文と親コンポーネントの間で と通信するために 'eventHub'を使用すると言います。これを行う別の方法がありますか？下のバイディングをチェックアウトすると、グローバルディレクティブは完全に動作し、ローカルディレクティブは失敗します。 vmが地方の指示に正しく縛られていないように感じます。

ローカルディレクティブ：

new Vue({ 
    el: '#vue', 
    directive: { 
    localSomething: { 
     bind (el, b, n, o) { 
     $(el).on('keydown', function(e) { 
      if(e.keyCode == 13 || e.keyCode == 9) { 
      b.value($(el).val()); 
      } 
     }); 
     }  
    } 
    }, 
    ... 

グローバルディレクティブ：

Vue.directive('globalSomething', { 
    bind (el, b, n, o) { 
    $(el).on('keydown', function(e) { 
     if(e.keyCode == 13 || e.keyCode == 9) { 
     b.value($(el).val()); 
     } 
    }); 
    } 
}); 

HTML：

Local: <input v-local-something="doSomething" /> 
    Global: <input v-global-something="doSomething" /> 

方法：

methods: { 
    doSomething: function(value) { 
     let vm = this; 
     setTimeout(function() { 
      vm.item.name = value; 
     }); 
    } 

フィドル：https://jsfiddle.net/4g1xyy9h/

Answer 1

あなたはタイプミスがあります。 directive:はdirectives:である必要があります。

fiddleが更新されました。