elasticsearch apiメソッドを使用するvuejs

Question

私はvuejsスクリプトを持っており、elasticsearch apiメソッドを使用する必要があります。

// ./main.js 
var Vue = require('vue'); 

Vue.use(require('vue-resource')); 

import ES from './elasticsearch.js'; 

new Vue({ 

    el: 'body', 

    methods: { 
     search: function() { 
      // should call the es.search... 
     } 
    } 
}); 

とelasticsearchスクリプト：

// ./elasticsearch.js 
var es = require('elasticsearch'); 

var client = new es.Client({ 
    host: 'localhost:9200' 
    ,log: 'trace' 
}); 

client.search({ 
    index: 'my_index', 
    type: 'my_type', 
    body: { 
    fields: {}, 
    query: { 
     match: { 
     file_content: 'search_text' 
     } 
    } 
    } 
}).then(function (resp) { 
    var hits = resp.hits.hits; 
}, function (err) { 
    console.trace(err.message); 
}); 

ので、この方法で検索でmain.jsがclient.searchを呼び出して、私の中で検索するテキストを送信する必要がありますサーバー（_search_text_）。

どのようにバインドするのですか？または、の弾性検索オブジェクトをのvuejsメソッド内で使用するにはどうすればよいですか？

ありがとうございます！

Answer 1

elasticsearch.jsファイルがモジュールとして正しく設定されていません：import ES from './elasticsearch'はファイルが何もエクスポートされないため何もしません。

それはおそらくより次のようになります。

// ./elasticsearch.js 
var es = require('elasticsearch'); 

var client = new es.Client({ 
    host: 'localhost:9200' 
    ,log: 'trace' 
}); 

function search (myIndex, myType, searchText) 
    return client.search({ 
    index: myIndex, 
    type: myType, 
    body: { 
     fields: {}, 
     query: { 
     match: { 
      file_content: searchText 
     } 
     } 
    } 
    }).then(function (resp) { 
     return hits = resp.hits.hits; 
    }, function (err) { 
    console.trace(err.message); 
}); 

export { search } 

我々はsearchという名前の関数を定義し、それをエクスポートします。注：私はまた、returnステートメントを組み込み、実際にPromiseを返し、関数から結果を得ました。

次にmain.jsに、我々は、その名前によって、それをインポートし、それを使用することができます答えを

// ./main.js 
var Vue = require('vue'); 

Vue.use(require('vue-resource')); 

import { search } from './elasticsearch.js'; 

new Vue({ 

    el: 'body', 

    methods: { 
     search: function() { 
      var result = search('someindex', 'sometype', 'Search text here').then(function(res) { 
    // do something with the result 
    }) 
     } 
    } 
}); 

Answer 2

私はあなたのコード内で「resp.hits.hitsを」とし、検索結果JSONオブジェクト配列で、あなたは以下のようなあなたのVUEのインスタンスを定義することができます。

// ./main.js 
var Vue = require('vue'); 

Vue.use(require('vue-resource')); 

import ES from './elasticsearch.js'; 

new Vue({ 

    el: 'body', 
    data:{ 
     searchResults:[] //this tell vue it is an array 
    } 

    methods: { 
     search: function() { 
      var self = this; 
      // call the search and get response data 
      client.search(function(resp){ 
       self.searchResults = resp.hits.hits 
      }) 
     } 
    } 

を}）;

あなたのhtmlでは、DOMをsearchResultsにバインドするだけです。それだけです。