Vue.js에서 Tabulator와 함께 사용하기 위한 Moment.js 라이브러리를 포함한 문제

Vue.js에서 Tabulator와 함께 사용하기 위한 Moment.js 라이브러리를 포함한 문제

moment.js 라이브러리가 필요한 Tabulator에서 Date Time 기능을 사용하려고 합니다.Tabulator를 추가하기 전의 어플리케이션에서는 이미 그 레벨의 특정 컴포넌트에서 moment.js가 사용되고 있었습니다.Tabulator를 사용하여 datetime을 사용하는 새로운 테스트 컴포넌트가 있습니다.보통은 모멘트를 Import하여 여기서 사용합니다만, 이 모멘트는 Tabulator 자체에서 필요한 것 같습니다.

처음에 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
  })

```

내 컴포넌트(테스트 페이지)에서비디오)

```
<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>
```

"Uncatched (in promise) Reference Error: moment is defined at Format.datetime (tabulator.js?ab1f:14619)" (포맷.js?ab1f:14619에서 포착되지 않은 참조 오류: 모멘트가 정의되지 않았습니다)라는 오류가 나타납니다.$modules\tabulator-tables\dist\js\tabulator.js에서 사용할 수 있어야 합니다.도서관을 어떻게 포함시킬지 아세요?

Vue 프로토타입에 모멘트를 주석을 다는 것은 올바른 접근 방식이 아니기 때문에 시도하던 첫 번째 옵션으로 돌아가십시오.권장되지 않은 경우에도 Tabulator는 Vue.monent를 검색하여 검색해야 합니다.그렇게 하도록 규정되어 있지 않다.

오픈 소스의 장점 중 하나는 라이브러리가 문제를 해결하기 위해 수행하는 작업을 정확하게 볼 수 있다는 것입니다.Tabulator 코드 베이스를 빠르게 검색하면 다음과 같이 나타납니다.

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

var newDatetime = moment(value, inputFormat);

포메터는 Import하지 않고 직접 모멘트를 호출합니다.도서관이 전 세계에서 이용 가능하기를 기대하는 구식 구조를 바탕으로 설계되어 있습니다.browser-land에서는 이는 "window" 객체에 있음을 의미합니다.이 문제는 다음 두 가지 빠른 옵션으로 해결할 수 있습니다.

1. 페이지 템플릿의 헤더에 다음과 같은 내용을 삽입하여 CDN 호스트 버전의 Moment(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;
   

ohgod 왜 위의 코멘트가 여러 면에서 더 나은 날짜-fns의 관점에서 반드시 틀린 것은 아닌지.그러나 Tabulator는 순간순간을 찾기 위해 하드코드로 되어 있기 때문에 작동하기 위해서는 순간 자체가 필요합니다.

언급URL : https://stackoverflow.com/questions/54134437/issues-including-moment-js-library-for-use-with-tabulator-in-vue-js