Question

引导 vue b-table 上的模板内的 Vue'this'对象

2019-03-08

803

javascript vue.js bootstrap-vue

我在 main.js 中添加了一组函数

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

，因为我的应用程序都需要这些函数。

访问这组函数非常简单。我将“this”对象作为参数传递以访问 vue 对象

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

在 b-table 组件模板中运行此相同函数时出现问题：

<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 warn]: Error in render: "TypeError: Cannot read property '$store' of null"

这是函数的原型

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

我认为可以通过组件内部的方法作为主函数的代理来解决这个问题，或者在组件中创建一个返回“this”对象的 prop

有没有办法在 bootstrap b-table 模板中使用“this”对象？

Answer 1

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

我猜有更好的解决方案。有什么想法吗？

只需使用模块内的属性修复它：

VM: null,

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

然后，在我使用的每个其他函数中

this.VM

然后不再需要将 vue 对象作为参数传递给函数。因此，修复了 bootstrap-vue 上 b-table 模板上的问题

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>