vuejs handsontable 공식 및 호출 I 초보자이야 handsontable 방법

Question

이 어쨌든 VUE하지만보다 자바 스크립트 문제의 아마 더 :

이 handsontable 정상 사용하면하여 테이블을 만들라는 이름의 스프레드 시트에 대한 플러그인 등) (이

hot = new Handsontable(container, {option}) 

을하고 다음 hot.loadData 같은 방법을 사용할 수 있습니다 ..

가 vuejs와 handsontable 사용하려면 래퍼 우리가 여기 https://github.com/handsontable/vue-handsontable-official이 찾을 수 있습니다. 래퍼 사용하면 테이블과 같이합니다 난 당신이 handsontable 방법 hot.loadData (데이터)를 호출해야합니다 DB에서 데이터를로드 할 수 있지만 배열을 줄 때

<template> 
    <div id="hot-preview"> 
    <HotTable :root="root" :settings="hotSettings"></HotTable> 
    </div> 
</template> 

<script> 
    import HotTable from 'vue-handsontable-official'; 
    import Vue from 'vue'; 

    export default { 
    data: function() { 
     return { 
     root: 'test-hot', 
     hotSettings: { 
      data: [['sample', 'data']], 
      colHeaders: true 
     } 
     }; 
    }, 
    components: { 
     HotTable 
    } 
mounted() { 
    localforage.config({ 
     driver: localforage.INDEXEDDB, 
     name: 'matchlist-database' 
    }) 
    localforage.getItem('DB').then(function (value) { 
     console.log('then i fetch the DB: ' + JSON.stringify(value)) 

     if (value !== 'null') { 
     console.log('dB contain something') 
     **root**.loadData(value) 
    } 
</script> 

그래서 그것을 잘 작동합니다.

나는 항상 오류 형식 오류를 얻을 수 vuejs에서이 메서드를 호출하는 방법을 찾을 수 없습니다 : root.loadData는 내가 대신 루트 전직의 생각할 수있는 모두와 함께 노력하는 기능

되지 않습니다 : HotTable.loadData (값)

하지만 아무 소용이 사람이 내가 vuejs 래퍼에서 handsontable 메소드를 호출 얼마나 저를 지적 할 수

에

. 또는 내 실수를 이해하기 위해 어떤 종류의 독서를해야하는지 알려주십시오. 많은 감사합니다

Answer 1

여기에 두 가지 문제, 나쁜 사람은 :)있다

1 문제 :

당신이 뷰의 방법/계산 된 속성/전문가/라이프 사이클 이벤트 내부 데이터를 참조하려면, this 키워드를 사용해야합니다. data : function() {return {root : "root-value"}} 그리고 console.log에 "root-value"문자열을 넣고 싶다면 console.log (this.root) 매니저.

당신은 같은 것을 가지고 있다면 :

data: function() { 
     return { 
     hot = new Handsontable(container, {option}) 
     .... 
     }; 

당신과 같이 hot.loadData()를 호출 할 수 있습니다

mounted() { 
    this.hot.loadData(); 
    ... 
} 

그래서이 데이터 속성을 노출하는 뷰의 인스턴스를 참조합니다.

2 문제 :

내가 제대로 구성 요소 래퍼를 이해한다면

, 당신은 소품으로 데이터를 전달 직접 Handsontable 메소드를 호출하지 않도록되어있다.

<HotTable :root="root" :settings="hotSettings"></HotTable> 

이것은 Vue가 사용자 데이터의 루트로있는 모든 것을 HotTable 구성 요소로 전달한다는 것을 의미합니다. 또한 데이터에 설정 한 내용을 전달합니다. 예에서, HotTable이 수신 :

root: 'test-hot', 
hotSettings: { 
    data: [['sample', 'data']], 
    colHeaders: true 
} 

을 이제// 업데이트를 변경, 수정 /, 당신은 뷰 인스턴스에서 데이터를 업데이트해야 HotTable 구성 요소에 전달해야 데이터를 추가합니다. this.hotSettings = 뭔가 새로운 것을과 같이해야합니다.root = 다른 것 및 HotTable 구성 요소가 수신합니다.

HotTable에서 실제로 일어나고있는 것을 이해하려면 모든 구성 요소 설명서를 읽으십시오. 정말. 문서를 읽으면 많은 시간을 절약 할 수 있습니다. 그 이후로 모두 의미가 있습니다! https://vuejs.org/v2/guide/components.html