Vuejsディレクティブとi18nを使用したSelectpickerのラップ

Question

誰かが私を助けることができますか？

bootstrap-selectpickerをラップするVue.js指示文を実行しています。このパラメータが空になった場合のデフォルトタイトルを翻訳するのにvue-i18n-pluginを使用したいと思いますが...私はエラー語っている：

Uncaught ReferenceError: $i18n is not defined

私-directive.jsは

import Vue from 'vue'; 

Vue.directive('plSelectpicker', { 
    twoWay: true, 

    params: [ 
    'title', 
    'style', 
    'liveSearch', 
    'actionsBox' 
    ], 

    bind: function() { 
    $(this.el).selectpicker({ 
     liveSearch: this.params.title || true, 
     title: this.params.title || $i18n.select, 
     style: this.params.style || 'btn-white', 
     actionsBox: this.params.actionsBox || true, 
    }); 
    }, 
}); 

私もその1を試してみた：

import Vue from 'vue'; 
import i18n from 'vue-i18n-plugin/src/vue-i18n.js'; 
Vue.use(i18n); 

Vue.directive('plSelectpicker', { 
    twoWay: true, 

    params: [ 
    'title', 
    'style', 
    'liveSearch', 
    'actionsBox' 
    ], 

    bind: function() { 
    $(this.el).selectpicker({ 
     liveSearch: this.params.title || true, 
     title: this.params.title || $i18n.select, // also tried this.$i18n 
     style: this.params.style || 'btn-white', 
     actionsBox: this.params.actionsBox || true, 
    }); 
    }, 
}); 

しかし、それはエラーに私を頭：

Uncaught TypeError: Cannot read property 'select' of undefined

誰かの任意のアイデアを？

Answer 1

thisは、Vueインスタンスではなくディレクティブを指すため、$i18nにはアクセスできません。試してみてくださいthis.vm.$i18n