JavaScript(vue.js)に関して質問させてください。
現在Electronを使用して単体アプリケーションを作成しています。
各バージョンは、
vue 2.16
NeDB 0.85
となります。
尚、タグにはMongoDBとしていますが、実際はNeDBとなります。
NeDBのデータストアに格納されているデータを取得して
画面のテーブルに一覧表示しようとしています。
画面では以下のようにtestDataと言う配列の要素を表示させようとしています
<button v-on:click="doSearch">検索</button> <tbody> <tr v-for="(test, index) in testData"> <td>{{ test.name }}</td> <td>{{ test.date }}</td>
検索ボタンを押下した際に下記doSearchメソッドを起動し
検索結果をtestDataと言う配列に格納しようとしているのですが
うまくいっていません。(testDataがカラになっていて検索結果が画面に表示されない)
また下記①では値が出力され、②では出力されず(array.length=0)
実行順序も②⇒①と実行されているようです。
var vue = new Vue({ el: '#test', data:{ testData: [], // テーブルに表示される検索結果データ db : [], // NeDBデータベースオブジェクト }, methods: { doSearch: function (e) { var condition = []; this.db.testCollection.find(condition, function(err, docs){ if(err == null){ // Domへ挿入して画面更新 this.testData = docs; console.log(this.testData); // ①testCollectionコレクションの内容が出力される }else{ tmpMessage = err; } }); console.log(this.testData);// ②testCollectionコレクションの内容が出力されない },
コールバック関数や非同期処理に関する知識が浅く
原因がわかっていません。
解決方法についてご存知の方がいらしたら教えてください。
よろしくお願いします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。