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

0đź‘Ť

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đź‘Ť

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>
👤Ellrohir

Leave a comment