vuejs handsontable公式と私は初心者だhandsontable方法

Question

を呼び出し、これはとにかくおそらくVUEよりjavascriptの問題の詳細ですが、：

がhandsontableという名前のスプレッドシート用のプラグインと通常の使用時に、あなたはしてテーブルを作りますなど）（この

hot = new Handsontable(container, {option}) 

をやって、その後、あなたがhot.loadDataのようなメソッドを使用することができます。..

がvuejsでhandsontable使用するには、ラッパーたちはここにhttps://github.com/handsontable/vue-handsontable-officialが見つけることができます。ラッパーを使用すると、このような表を作る：

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

私はあなたがhandsontable方法hot.loadData（データ）を呼び出す必要がありますDBからデータをロードするが、配列を与えるときに、それが正常に動作します。

私は常にエラー はTypeErrorを得るvuejsでこのメソッドを呼び出す方法を見つけることができません：root.loadDataは私が代わりにルートEXの考えることができるすべてを試みた機能

ではありません。HotTable.loadData（値）

しかし、無駄

には、誰かが私がvuejsラッパーからhandsontableメソッドを呼び出す方法私を指摘することができます。私のミスを理解するために何をすべきかを教えてください。たくさんありがとう

Answer 1

ここでは二つの問題、悪くないものは:)がある

第一の問題：

あなたはVueののメソッド/計算プロパティ/ウォッチャー/ライフサイクルイベント中にあなたのデータを参照したい場合は、 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(); 
    ... 
} 

だから、これはあなたのデータプロパティを公開Vueのインスタンスを参照します。

第二の問題：私が正しくコンポーネントラッパーを理解していれば

、あなたは直接、任意のHandsontableメソッドを呼び出していない、小道具としてそれにデータを渡すことになっています。

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

これは、VueのはHotTableコンポーネントにデータにrootとしてあなたが持っているものは何でも通ることを意味します。また、データの設定として持っているものを渡します。例では、HotTableはこれらを受信：あなたはHotTableコンポーネントに渡されるべき/更新/変更/追加データを変更したい場合は

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

は今、あなたはVueのインスタンスにデータを更新する必要があります。 this.hotSettings = 何か新しいこととこれを行う必要があります。root = 他のものとHotTableコンポーネントはそれらを受け取るでしょう。

実際にHotTableで起こっていることを理解するには、すべてのコンポーネントドキュメントをお読みください。本当に。ドキュメンテーションを読んだら、多くの時間を節約できます。それ以降はすべて意味があります！ https://vuejs.org/v2/guide/components.html