2017-03-01 66 views
0

採取的一舉一動,我可以以後,我沒有能夠解決這個問題List.js沒有創建動態元素後工作買Vue.js

我有項目的名單,我必須從拉API,但是當我追加元素後得到的迴應,但list.js不起作用,它不是從元素中搜索任何東西。
<div class="search-word" hidden></div>這個詞包含有連接的單詞像name+' '+title+' '+number

它顯示錯誤

Uncaught TypeError: Cannot read property 'childNodes' of undefined

這裏的Html

<input type="text" id="filter_search"> 
<div id="items"> 
    <ul class="list list-unstyled"> 
     <!-- this dynamically created --> 
     <li> 
      <div class="search-word" hidden></div> 
     </li> 
     ... 
     <li> 
      <div class="search-word" hidden></div> 
     </li> 
     <!-- /this dynamically created --> 
    </ul> 
</div> 

腳本

<script> 
    /*========== List Js is Scrtip here ==========*/ 
    var options = { 
     valueNames: ['search-word'] 
    }; 

    var items = new List("items", options); 

    $(document).on('keypress keyup keydown', "#filter_search", function(){ 
     items.search($(this).val()); 
    }); 


    /*========== Vue Js is Scrtip here ==========*/ 
    var itemVue = new Vue({ 
     el: "#items", 
     data: { 
      items: [] 
     }, 
     created() { 
     this.postItems() 
     }, 
     methods:{ 
      postItems : function() { 
       thisData = this 
       axios.post('http://...', { 
        _token: token, 
        }) 
        .then(function (response) { 
        thisData.items = response.data 
        }) 
        .catch(function (error) { 
        thisData.error = error 
        }) 
      } 
     } 
    }); 

</script> 

請幫助...

在此先感謝

+0

我真的不知道你爲什麼拉外部庫時,這件事可能是非常只需輕鬆完成VueJS。 –

+1

@BelminBedak謝謝你的回覆可以告訴它如何可以用vue js – User97798

+0

檢查這個答案http://stackoverflow.com/questions/41791482/filter-list-with-vue-js/41791604#41791604 - 你在尋找對於這樣的事情? –

回答

0

你可以使用VUE全球nextick

Vue.nextTick(function() { 
    let list = new List(id, options) 
    })