bitte In meinem Projekt, Vue Js verwendet wird, müssen Sie eine lange Liste von Elementen zur Verfügung zu stellen, um die Leistung zu verbessern Ich möchte ein Tool wie diese verwenden: https://github.com/CatchLabs/vue-list-view Wie wird die Listenansicht in Vue Js verwendet?

Jetzt habe ich Angebot mit diesen Plugin, versucht was ich brauche. Mein Problem ist, dass es mir nicht gelungen ist, es zum Laufen zu bringen, da beim Scrollen die Liste leer angezeigt wird. Wer hat Erfahrung in diesem Plugin oder Vue Js, wer kann mir helfen?

Mein Code:

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>

Aber die erzeugte Liste ist leer.

Image example

Vielen Dank

Quelle

2016-05-02 Jedidias

Ich glaube, Sie Code etwa wie folgt sein sollte: '' ' var myListView = ListView ({ Vorlage: '

' }); '' ' – user13653

Sie benötigen eine Vorlage zu beheben, Hinzufügen der prop: Elemente mit dem Array

template: '<div :items="myArr" >{{ item.foo }}{{ item.bar }}</div>'

Quelle

2016-08-27 16:04:52

Wie wird die Listenansicht in Vue Js verwendet?

Js

HTML

Antwort

Verwandte Themen