javascript - VueJS में हैंडसेट योग्य, केवल पृष्ठ पुनः लोड पर तालिका लोड होता है



vue.js vuejs2 (1)

मैं वेंइला जावास्क्रिप्ट के साथ हेन्डोसन्टेबल का प्रयोग कर रहा हूं जो कि एक VueJS सिंगल पृष्ठ एप्लीकेशन के अंदर है I निम्न श्रोता का उपयोग करना:

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

तालिका केवल एक पृष्ठ ताज़ा पर दिखाई देती है, प्रारंभिक लोड नहीं है मैंने यह भी प्रयोग करने का प्रयास किया:

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

लेकिन तालिका बिल्कुल नहीं दिखती है (यह भी नहीं दिखाती है कि अगर मैं DOMContentLoaded श्रोता को निकालता हूं) हैंडसटेबल साइट जैसे उदाहरणों में से कुछ उदाहरण https://docs.handsontable.com/0.18.0/demo-bootstrap.html DOMContentLoaded श्रोता का उपयोग दूसरों को किसी श्रोता का उपयोग नहीं करते हैं।

VueJS पृष्ठ कोड नीचे है।

TableView.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>      

मैं VueJS निर्यात डिफ़ॉल्ट ब्लॉक के बाहर हैण्डसेट योग्य कोड को आगे बढ़ाने की कोशिश की:

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

लेकिन मुझे handsontable.js द्वारा फेंका एक त्रुटि मिलती है:

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

VueJS के साथ हेन्डसेट योग्य को एकीकृत करने के लिए सबसे अच्छा तरीका क्या है? (मैंने कोशिश की-हौंडेबल और वीयू-हँडसैटेबल-आधिकारिक लेकिन समस्याओं को काम करने के लिए मिल रहा था)?


आप ईवेंट सूचीकर्ता को निकालने की कोशिश कर सकते हैं: document.addEventListener('DOMContentLoaded' और mounted किए mounted पर सीधे इस कोड को निष्पादित करें, जैसा कि DOMContentLoaded में mounted गया है लगभग 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> 




handsontable