1

En mi proyecto se utiliza Vue.js porque es necesario mostrar una larga lista de elementos, y para mejorar el rendimiento quiero utilizar una herramienta como ésta.

Ahora he intentado usar este plugin, que ofrece lo que necesito. Mi problema es que no he logrado hacerlo funcionar, ya que al desplegar la lista se muestra vacía. ¿Alguien tiene experiencia en este plugin o en Vue.js que pueda ayudarme?

Éste es mi código:

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'}]
    }
})

Y el 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>

Éste es el resultado que obtengo:

Image

1 respuesta 1

2

Necesitas corregir tu template, agregando la prop :items con tu array

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

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.