55139


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

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

[code]

    <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>
    
[/code]

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


CC BY-SA 4.0
2019-05-21T07:53:11.017
55137
2019-05-21T08:06:00.633
30948
question
vue.js
Vue.jsを利用したTabulatorのrowSelectedイベントについて


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

[code]

      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)
        }
      }
    
[/code]

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


CC BY-SA 4.0
2019-05-21T08:06:00.633
55139
2019-05-21T08:06:00.633
30948
55137
answer