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

Posted 2023-03-28

【中文标题】Tabulator + Nuxt.js：如何在回调中使用 axios？

【英文标题】：Tabulator + Nuxt.js: How to use axios in callbacks?

【发布时间】：2020-01-16 08:48:53

【问题描述】：

我尝试在我的 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: '[e-mail]',
              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 中方法部分的功能？

【参考方案1】：

尝试使用箭头函数表达式。常规函数有它们自己的“this”。

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