2016-05-02 17 views
1

ください 、VueのJsのが使用されている、あなたは私がこのようなツールを使用するパフォーマンス向上のために、アイテムの長いリストを提供する必要があります。 https://github.com/CatchLabs/vue-list-viewVue Jsでlist-viewを使用するには?私のプロジェクトで

を今私が提供し、このプラグインを使用して試してみました私は何が必要です。私の問題は、リストをスクロールすると空が表示されるため、それを機能させることができなかったことです。 誰かがこのプラグインまたはVue Jsで私を助けてくれた経験がありますか?

マイコード:

のJs

var ListView = require('./vue-list-view/lib/list-view'); 

var myListView = ListView.default({ 
    template: '<div>{{ item.foo }}{{ item.bar }}</div>' 
}) 

Vue.component('my-list-view', myListView) 

new Vue({ 
    el: '#list', 
    data: { 
     myArr: [{foo:'a',bar:'b'},{foo:'c',bar:'d'},{foo:'a',bar:'b'},{foo:'c',bar:'d'},{foo:'a',bar:'b'},{foo:'c',bar:'d'},{foo:'a',bar:'b'},{foo:'c',bar:'d'},{foo:'a',bar:'b'},{foo:'c',bar:'d'},{foo:'a',bar:'b'},{foo:'c',bar:'d'},{foo:'a',bar:'b'},{foo:'c',bar:'d'},{foo:'a',bar:'b'},{foo:'c',bar:'d'},{foo:'a',bar:'b'},{foo:'c',bar:'d'},{foo:'a',bar:'b'},{foo:'c',bar:'d'}] 
    } 
}) 

HTML

<!doctype html> 
<html class="no-js" lang=""> 
    <head> 
     <meta charset="utf-8"> 
     <meta http-equiv="x-ua-compatible" content="ie=edge"> 
     <title></title> 
     <meta name="description" content=""> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="apple-touch-icon" href="apple-touch-icon.png"> 
     <!-- Place favicon.ico in the root directory --> 
     <link rel="stylesheet" href="css/normalize.css"> 
     <link rel="stylesheet" href="css/main.css"> 
     <script src="js/vendor/modernizr-2.8.3.min.js"></script> 
    </head> 
    <body> 
     <!--[if lt IE 8]> <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> <![endif]--> 

     <h4>Star</h4> 
     <div id="list"> 
      <my-list-view :items="myArr"></my-list-view> 
     </div> 
     <h4>End</h4> 

     <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.12.0.min.js"><\/script>')</script> 
     <script src="js/vue.min.js"></script> 
     <script src="js/app.js"></script> 

    </body> 
</html> 

しかし、生成されたリストは空です。

Image example

あなたが小道具を追加し、テンプレートを修正する必要があり、非常に

+0

を持つアイテムは、私はあなたのコードは次のようなものであるべきだと思います'' ' var myListView = ListView({ テンプレート: '

{{ item.foo }}{{ item.bar }}
' }); '' ' – user13653

答えて

1

ありがとう: :配列

template: '<div :items="myArr" >{{ item.foo }}{{ item.bar }}</div>' 
関連する問題