https://laravist.com/discuss/867

by Yin Yanjun

HTML

<script src="//cdn.bootcss.com/vue/1.0.26/vue.js"></script>
    <div class="jumbotron">
        <div class="container">
            <h2>简单　从不简单
                <a role="button" href="#" class="btn btn-primary pull-right">发布新主题</a>
            </h2>
        </div>
    </div>
    <div class="container">
        <tasks :list="lists"></tasks>
    </div>
    <template id="tasks-template">
        <ul class="last-group">
            <li class="list-group-item" v-for="discussions in list">
                {{ discussions.body }}
            </li>
        </ul>
    </template>

JavaScript

var data = [{
        "id": 1,
        "title": "Mollitia rerum qui aliquid dolore.",
        "body": "Quo cumque est cumque atque earum qui. Occaecati libero harum qui sit est sint cumque. Ut omnis ipsam velit est.",
        "user_id": 3,
        "last_user_id": 4,
        "created_at": "2016-09-09 05:16:20",
        "updated_at": "2016-09-09 05:16:20"
    },{
        "id": 2,
        "title": "Consequatur omnis non reprehenderit quisquam sapiente.",
        "body": "Dicta doloribus animi et saepe omnis. Atque voluptas praesentium consectetur modi a voluptatum rerum. Quibusdam sapiente sint est et perferendis asperiores.",
        "user_id": 24,
        "last_user_id": 7,
        "created_at": "2016-09-09 05:16:20",
        "updated_at": "2016-09-09 05:16:20"
    },{
        "id": 3,
        "title": "Aliquid corrupti non maiores unde dolor temporibus eum.",
        "body": "Ut quaerat atque veniam vel. Necessitatibus error totam ut qui. Magnam est id itaque temporibus est. Dolores molestias beatae quos architecto nam id.",
        "user_id": 20,
        "last_user_id": 15,
        "created_at": "2016-09-09 05:16:20",
        "updated_at": "2016-09-09 05:16:20"
    },
    {
        "id": 4,
        "title": "Eius aut tenetur aut non et atque ut dolor.",
        "body": "Saepe cumque sed hic commodi. Officiis esse quaerat qui nihil. Nostrum velit modi esse quia facere repellendus. Voluptatum consequatur unde reprehenderit hic voluptatem dignissimos.",
        "user_id": 11,
        "last_user_id": 2,
        "created_at": "2016-09-09 05:16:20",
        "updated_at": "2016-09-09 05:16:20"
    },
    {
        "id": 5,
        "title": "Amet laboriosam sint dicta ipsam id impedit corrupti.",
        "body": "Nisi aut ut sapiente aut a non non. Est autem ea minima quo. Alias facere velit itaque sed non ad.",
        "user_id": 13,
        "last_user_id": 27,
        "created_at": "2016-09-09 05:16:20",
        "updated_at": "2016-09-09 05:16:20"
    },
    {
       ...