Vue 'this' object inside template on bootstrap vue b-table

1
votes

I added a set of functions into

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

at my main.js; since I need this functions all alone my app.

Accessing to this set of functions is a piece of cake. I pass the 'this' object as a param to acces the vue object

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

Problem comes when running this same function into a b-table component template:

<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"

This is the prototype of the function

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

I thought in overpass the issue with a method inside the component acting as a proxy for the main function, or creating a prop in the component that returns the "this" object

Any way to use the "this" object inside bootstrap b-table template?

2
javascriptvue.jsbootstrap-vue
try to pass the logic inside a computed property return this.elantana.CheckPermission(this, 'fabrics@edit_fabric') and use it inside the template v-if="myComputedProperty" – Sovalina
I though about that. In fact, I am using a method as a proxy to pass the permission as a parameter for now. – Fernando Rodríguez

2 Answers

0
votes

This solution is not completely valid; since you can access the vie object, you can not access the “this” object of the component. To do so you need to set the VM object in every mounted hook of each component.

I’ll guess there is a better solution for this. Any ideas?

Just fixed it using a property inside my module:

VM: null,

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

Then, in every other function i use

this.VM

Then there is no need anymore to pass the vue object as a parameter to the function. hence, fixing the issue on the b-table template on bootstrap-vue

0
votes

What I just did to solve the same issue is to call "local" method defined in scirpts of the .vue page:

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

and from there just call the target "global" method, because Vue object is easilly accesible here:

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