Question

有人可以帮助我吗？

我正在执行一个Vue.js指令来包装bootstrap-selectpicker并在指令中我希望使用vue-i18n-plugin转换默认标题，以防这些参数变空但我不能......我收到一条错误消息：

未捕获的ReferenceError：$ i18n未定义

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

但它让我误解了错误：

未捕获的TypeError：无法读取未定义的属性“select”

有人有什么想法吗？

Answer 1

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

用Vuejs指令和i18n包装Selectpicker

1 个答案: