Tabulator + Nuxt.js：如何在回调中使用axios？

Question

我尝试在我的 Nuxt.js 项目中添加 Tabulator。我已经完成了下一个组件：

<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@email.ru',
              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>

我想在 Nuxt.js 的回调 'axios' 中使用，但它不起作用。我不知道该怎么做。

据我了解，我将无法使用 Tabulator 中方法部分的功能？

Answer 1

尝试使用箭头函数表达式。常规函数拥有 "this".

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

Tabulator + Nuxt.js：如何在回调中使用axios？

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

vue.js

axios

nuxt.js

tabulator