Question

我在其中添加了一组功能

Vue.prototype.elantana = require("./shared/elantana.js").default;

在我的main.js上；因为我的应用程序一个人都需要此功能。

访问这套功能简直是小菜一碟。我将“ this”对象作为参数来访问vue对象

<div v-if="elantana.CheckPermission(this, 'fabrics@add_fabric')">
    <b-button class="float-button" variant="warning" @click="ShowEditModal">+</b-button>
</div>

在b表组件模板中运行相同功能时出现问题：

<b-table class="table-outline bg-white" :hover="true" :striped="false" :bordered="false" :small="false" :fixed="false" responsive="sm" :items="fabrics" :fields="tableFields" :current-page="currentPage" :per-page="perPage" head-variant="light">
    <template slot="actions" slot-scope="data">
        <div class="float-right">
            <div v-if="elantana.CheckPermission(this, 'fabrics@edit_fabric')">
                <b-button class="mr-2" type="button" size="sm" variant="danger" @click="ShowEditModal(data.item)"><i class="fa fa-trash-o"></i></b-button>
            </div>
        </div>
    </template>
</b-table>

[Vue警告]：渲染错误：“ TypeError：无法读取null的属性'$ store'”

这是该函数的原型

/**
 * Returs if the permissions is in the avaialable permissions array
 * @param {VUE object} vm 
 * @param {String} permission 
 * @return {Boolean} 
 */
CheckPermission(vm, permission)

我想通过使用组件内部的方法作为主要功能的代理来解决该问题，或者在组件中创建一个返回“ this”对象的道具

是否可以在引导B表模板中使用“ this”对象？

Answer 1

此解决方案并不完全有效；由于可以访问vie对象，因此不能访问组件的“ this”对象。为此，您需要在每个组件的每个已挂接钩子中设置VM对象。

我猜想对此有更好的解决方案。有任何想法吗？

只需使用模块内部的属性对其进行修复：

VM: null,

SetVM(vm) {
    this.VM = vm;
},

然后，在我使用的所有其他功能中

this.VM

然后不再需要将vue对象作为参数传递给函数。因此，将问题解决在bootstrap-vue的b表模板上

Answer 2

我刚刚为解决同样的问题所做的是调用 .vue 页面的脚本中定义的“本地”方法：

  <b-table /*...*/>
    <template #cell(foo)="data">
      {{ localFormat(data.value) }}
    </template>
  </b-table>

然后从那里调用目标“全局”方法，因为 Vue 对象在这里很容易访问：

...
<script>
...
  methods: {
    localFormat(value) {
      // cannot call "Vue" object from inside of BootstrapVue template
      return this.globalFormat(value);
    },
  },
...
</script>

引导vue b表上模板内的vue'this'对象

2 个答案: