VueJ에서는 핸섬 가능, 페이지 새로고침 시에만 테이블 로드 가능

VueJ에서는 핸섬 가능, 페이지 새로고침 시에만 테이블 로드 가능

VueJS의 한 페이지 어플리케이션 내에서 바닐라 자바스크립트와 함께 Handsontable을 사용하고 있습니다.다음 청취자 사용:

document.addEventListener('DOMContentLoaded', function() ...

테이블은 페이지 새로 고침 시에만 표시되며 초기 로드는 표시되지 않습니다.또, 다음과 같이 시도했습니다.

document.addEventListener('load', function() ...

그러나 테이블은 전혀 표시되지 않습니다(DOMContentLoaded 리스너를 삭제해도 표시되지 않습니다).https://docs.handsontable.com/0.18.0/demo-bootstrap.html 등 핸즈터블사이트의 예 중 일부는 DOMContentLoaded 리스너를 사용하고 있으며 다른 예에서는 리스너를 사용하지 않습니다.

VueJS 페이지 코드는 다음과 같습니다.

테이블 뷰vue:

<template>
    <div id="example"></div>
</template>

<script>
import Handsontable from 'handsontable'               
import 'handsontable/dist/handsontable.full.css'      
export default {            
  name: 'TablesView',       
  data () {                 
    return {                
      tableData: {}  
  }                       
},                        
created: function () {     
  this.populateHot()      
},    
methods: {
  populateHot: function() {
    document.addEventListener('DOMContentLoaded', function() {
      var data = [
        ['', 'Kia', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],
        ['2012', 10, 11, 12, 13, 15, 16],
        ['2013', 10, 11, 12, 13, 15, 16]
      ]
      var container1 = document.getElementById('example')
      var hot1 = new Handsontable(container1, {
        data: data,
        startRows: 2,
        startCols: 5
      })
    })
  }
}
</script>      

Handsontable 코드를 VueJS 내보내기 기본 블록 외부로 이동하려고 했습니다.

<script>
import ....
var hotData = []
export default {...
// update hotData with ajax loaded data
}
function initializeHandsOn() {...}
document.addEventListener('DOMContentLoaded', initializeHandsOn(), false)
</script>

그러나 핸즈터블에 의해 에러가 발생합니다.js:

Uncaught TypeError: Cannot read property 'insertBefore' of null(…)

Handsontable을 VueJs와 가장 잘 통합하는 방법을 알고 계십니까? (vue-handsontable과 vue-handsontable-official을 시도했지만 어느 쪽도 작동하지 않았습니다.)

이벤트 리스트너를 삭제하여 시도할 수 있습니다.document.addEventListener('DOMContentLoaded'이 코드를 직접 실행합니다.mounted,~하듯이mountedvue로 환산하면 대략 와 같다DOMContentLoaded다음과 같습니다.

<script>
import Handsontable from 'handsontable'               
import 'handsontable/dist/handsontable.full.css'      
export default {            
  name: 'TablesView',       
  data () {                 
    return {                
      tableData: {}  
  }                       
},                        
mointed: function () {     
  this.populateHot()      
},    
methods: {
  populateHot: function() {
      var data = [
        ['', 'Kia', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],
        ['2012', 10, 11, 12, 13, 15, 16],
        ['2013', 10, 11, 12, 13, 15, 16]
      ]
      var container1 = document.getElementById('example')
      var hot1 = new Handsontable(container1, {
        data: data,
        startRows: 2,
        startCols: 5
      })
  }
}
</script> 

마운트된 방식을 사용합니다.마운트된 방식과 작성된 방식을 사용해야 할 때 가장 큰 차이점은 요소가 DOM에 추가된 시점입니다.다른 비부위 부품과의 연결이 필요할 때 자주 발생하는 문제입니다.

추신: 또 다른 테이블을 사용하는 것도 고려할 수 있습니다.HT는 VNode 아이디어 등을 무시하고 오래된 기술을 기반으로 구축되었습니다.

언급URL : https://stackoverflow.com/questions/43163703/handsontable-in-vuejs-table-loads-only-on-page-reload