0

現在、Vue.jsを利用して、クライアント開発を行っております。

その中で、tabulatorを利用していますが、
tabulatorに用意されている「rowSelected」を利用しても、
methodsのtestメソッドが「test is not defined」になります。

<template>
  <div ref="table"></div>
</template>
<script>
export default {
  data () {
    return {
      tabulator: null,
      tableData: [],
      rowNo: {
        title: 'No',
        field: 'rowNo',
        align: 'center',
        formatter: 'rownum',
        headerSort: false,
        width: 30
      }
  },
  mounted () {
    this.tabulator = new this.$Tabulator(this.$refs.table, {
      data: this.tableData,
      columns: [ this.rowNo ],
      rowSelected: function (row) {
        this.test()
        // thisはtabulatorとなるため、test()が無い
        // vueのmethodsのtset()を呼び出したい
      }
    })
  },
  methods: {
    test () {
      console.info('test')
    }
  },
}
</script>
<style lang="scss" scoped>
</style>

どうにかtabulatorのrowSelectedにて、testメソッドを呼び出したいのですが、方法はございますでしょうか。

1 件の回答 1

0

書き込んでいる途中に頭が整理されて自己解決しました。

  mounted () {
    this.tabulator = new this.$Tabulator(this.$refs.table, {
      data: this.tableData,
      columns: [ this.rowNo ],
      rowSelected: this.test
    }),
  methods: {
    test (row) {
      console.info('test')
      console.info(row)
    }
  }

上記の書き方で無事イベント発火しました。
data()のオブジェクトにも無事アクセスできました。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。