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

但这让我犯了错误:

Uncaught TypeError: Cannot read property 'select' of undefined

有人有什么想法吗？

Answer 1

this 引用指令，而不是 Vue 实例，因此无法通过这种方式访问​​ $i18n 。尝试 this.vm.$i18n