制表符+ Nuxt.js:如何在回调中使用axios? [英] Tabulator + Nuxt.js: How to use axios in callbacks?

问题描述

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

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: '[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'中使用它，但是它不起作用.我不知道该怎么做.

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

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

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

推荐答案

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

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)
                  })
              },
            }

这篇关于制表符+ Nuxt.js:如何在回调中使用axios?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！