使用 Vuejs 指令和 i18n 包装 Selectpicker

Question

有人可以帮助我吗？

我正在做一个 Vue.js 指令来包装 bootstrap-selectpicker 并在指令内部我想使用 vue-i18n-plugin 来翻译默认标题，以防此参数为空但我不能......我我收到一条错误消息：

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

我也试过那个：

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

但它让我陷入了错误：

未捕获的类型错误：无法读取未定义的属性“选择”

有人知道吗？

Answer 1

this 指的是指令，而不是 Vue 实例，所以 $i18n 不能以这种方式访问​​。试试this.vm.$i18n