Tabulator + Nuxt.js: How to use axios in callbacks?

Question

I try to add Tabulator in my Nuxt.js project. I have done the next component:

<template>
  <div ref="table"></div>
</template>

<script>
  let Tabulator = require("tabulator-tables")
  import 'tabulator-tables/dist/css/tabulator_simple.min.css'
  let saveIcon = function(cell, formatterParams, onRendered) {
    return "<img src='/icons/save.png'>";
  }

  export default {
    data() {
        return {
          tabulator: null,
          tableData: [
            {
              id: 1,
              username: 'user',
              email: '[email protected]',
              activationCode:'1243412-123413-4134',
              active: true,
              admin: true,
              user: true
            }
          ],
        }
      },
      watch: {
        tableData: {
          handler: function (newData) {
            this.tabulator.replaceData(newData);
          },
          deep: true,
        }
      },
      mounted(){
        this.tabulator = new Tabulator(this.$refs.table, {
          data: this.tableData,
          reactiveData:true,
          columns: [
            {title:"#", field:"id", sorter:"number"},
            {title:"Пользователь", field:"username", sorter:"string"},
            {title:"Email", field:"email", sorter:"string"},
            {title:"Код активации", field:"activationCode"},
            {title:"Активный", field:"active", align:"center", formatter:"tickCross", editor:true},
            {title:"Роли",
              columns:[
                {title:"Администратор", field:"admin", align:"center", formatter:"tickCross", editor:true},
                {title:"Пользователь", field:"user", align:"center", formatter:"tickCross", editor:true},
              ],
            },
            {formatter:saveIcon, width: 30, align:"center", cellClick:function(e, cell){
                this.$axios.$get('/admin/user')
                  .then((response) => {
                    console.log(result)
                  })
              },
            }
          ],
        });
      },
  }
</script>

I want to use in callbacks 'axios' from Nuxt.js, but it doesn't work. I don't understand how to do it.

Just as I understand, I won't be able to use the functions from the methods section in Tabulator?

Answer 1

Try to use arrow function expression. Regular functions have they own "this".

 {formatter:saveIcon, width: 30, align:"center", cellClick:(e, cell) => {
                this.$axios.$get('/admin/user')
                  .then((response) => {
                    console.log(result)
                  })
              },
            }