How to use list-view in Vue.js?

Question

please In my project, Vue.js is used, you need to provide a long list of items, to improve performance I want to use a tool like this: https://github.com/CatchLabs/vue-list-view

Now I have tried using this plugin, offering what I need. My problem is that I have not managed to make it work, because when scrolling the list shown empty. Does anyone have experience in this plugin or Vue Js who can help me?

My 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>

But the generated list is empty.

Image example

Thank you very much

I think you code should be something like the following: ``` var myListView = ListView({ template: '<div>{{ item.foo }}{{ item.bar }}</div>' }); ``` — user13653
– user13653, Commented May 2, 2016 at 17:19

Ernesto Hernández · Accepted Answer · 2016-08-27 16:04:52Z

1

You need to fix your template, adding the prop :items with the array

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

answered Aug 27, 2016 at 16:04

Ernesto Hernández

2552 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to use list-view in Vue.js?

Js

HTML

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Js

HTML

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related