Wrapping Selectpicker mit Vuejs Direktive und i18n

Question

Jemand kann mir helfen?

Ich mache eine Vue.js-Anweisung, um die bootstrap-selectpicker zu wickeln und innerhalb der Direktive möchte ich die vue-i18n-plugin verwenden, um einen Standardtitel zu übersetzen, falls diese Parameter leer sind, aber ich kann nicht ... Ich erhalte eine Fehler zu sagen, dass:

Uncaught ReferenceError: $i18n is not defined

my-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, 
    }); 
    }, 
}); 

ich habe auch versucht, dass man:

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, 
    }); 
    }, 
}); 

Aber es Kopf, um mich auf den Fehler:

Uncaught TypeError: Cannot read property 'select' of undefined

Jemand eine Idee?

Answer 1

this bezieht sich auf die Richtlinie, nicht die Vue-Instanz, also ist $i18n nicht auf diese Weise zugänglich. Versuchen Sie this.vm.$i18n