Проблемы, включая библиотеку Moment.js для использования с Tabulator в Vue.js - PullRequest
Новая
       13

Проблемы, включая библиотеку Moment.js для использования с Tabulator в Vue.js

0 голосов
/ 10 января 2019

Я пытаюсь использовать функциональность Date Time с Tabulator, для которого требуется библиотека moment.js. В моем приложении перед добавлением Tabulator, moment.js уже использовался в некоторых компонентах этого уровня. У меня есть новый тестовый компонент, который использует Tabulator и пытается использовать datetime. Обычно я просто импортирую момент и использую его здесь, но кажется, что момент необходим в самом табуляторе.

Сначала я подумал, что Moment.js необходимо настроить глобально в моем приложении, поэтому я сделал это.

Main.js: 

```
   import Vue from 'vue'
   import App from './App'
   import router from './router'
   import { store } from './store'
   import Vuetify from 'vuetify'
   import 'vuetify/dist/vuetify.min.css'
   import moment from 'moment'

   Vue.prototype.moment = moment

   ...............

   new Vue({
   el: '#app',
   data () {
    return {
      info: null,
      loading: true,
      errored: false // this.$root.$data.errored
    }
  },
  router,
  components: { App },
  template: '<App/>',
  store
  })

```

В моем компоненте (Testpage.vue) 

```
<template>
  <div>
    <div ref="example_table"></div>
  </div>
</template>

<script>
// import moment from 'moment'
var Tabulator = require('tabulator-tables')
export default {
  name: 'Test',
  data: function () {
    return {
      tabulator: null, // variable to hold your table
      tableData: [{id: 1, date: '2019-01-10'}] // data for table to display
    }
  },
  watch: {
    // update table if data changes
    tableData: {
      handler: function (newData) {
        this.tabulator.replaceData(newData)
      },
      deep: true
    }
  },
mounted () {
    // instantiate Tabulator when element is mounted
    this.tabulator = new Tabulator(this.$refs.example_table, {
      data: this.tableData, // link data to table
      columns: [
        {title: 'Date', field: 'date', formatter: 'datetime', formatterParams: {inputFormat: 'YYYY-MM-DD', outputFormat: 'DD/MM/YY', invalidPlaceholder: '(invalid date)'}}
      ],
}
</script>
```

Я получаю сообщение об ошибке: «Ошибка ссылки Uncaught (в обещании): момент не определен в Format.datetime (tabulator.js? Ab1f: 14619)» Я могу использовать момент в других компонентах с помощью этого. $ Moment (), но мне нужно, чтобы он был доступен в node_modules \ tabulator-tables \ dist \ js \ tabulator.js поскольку именно там происходит ошибка. Есть идеи, как включить библиотеку?

1 Ответ

0 голосов
/ 10 января 2019

Вернитесь к первому варианту, который вы пробовали, потому что аннотирование прототипа Vue моментом, безусловно, не правильный подход. Даже если бы это было рекомендовано (а это не так), Tabulator должен был бы знать, чтобы найти его, ища Vue.moment. Это не закодировано для этого.

Одна из вещей, которые мне нравятся в Open Source, это то, что вы можете точно видеть, что делает библиотека, чтобы помочь решить проблему. Быстрый поиск по базе кода Tabulator находит это:

https://github.com/olifolkerd/tabulator/blob/3aa6f17b04cccdd36a334768635a60770aa10e38/src/js/modules/format.js

var newDatetime = moment(value, inputFormat);

Форматтер просто вызывает момент напрямую, не импортируя его. Он четко спроектирован вокруг механизма старой школы, предполагающего, что библиотеки будут доступны во всем мире. В браузере это означает, что он находится на «оконном» объекте. Два быстрых варианта могут решить эту проблему:

  1. Используйте версию Moment, размещенную на CDN, такую ​​как https://cdnjs.com/libraries/moment.js/, добавив что-то вроде этого в заголовок шаблона вашей страницы: 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.23.0/moment.min.js"></script>

  2. Настройте свой код выше, чтобы установить момент в окне: 

    window.moment = moment;

комментарий ohgodwhy выше не обязательно ошибочен с точки зрения того, что date-fns лучше во многих отношениях. Но это не сработает для вас, потому что Tabulator жестко запрограммирован на поиск момента, поэтому вам понадобится сам момент для работы.

...