VUE结合社区,是不是可以搞一下,但是貌似出点问题!

<head>
    <meta charset="UTF-8">
    <title>极简生活</title>
    <link rel="stylesheet" href="/css/bootstrap.css">
    <link rel="stylesheet" href="/css/test.css">

</head>
<body>
<nav role="navigation" class="navbar navbar-default navbar-static-top">
    <div class="container">
    <div class="navbar-header">
        <a href="{ url('/') }" class="navbar-brand">极简生活</a>
    </div>
    <div class="navbar-collapse collapse" id="navbar">
        <ul class="nav navbar-nav">
            <li class="active"><a href="/">主 页</a></li>
            <li><a href="#about">关 于</a></li>
            <li><a href="#contact">联 系</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="../navbar/">登 陆</a></li>
            <li><a href="/user/register">注 册</a></li>
        </ul>
    </div><!--/.nav-collapse -->
    </div>
</nav>
@yield('content')
<script src="/js/vue.min.js"></script>
<script>
    Vue.component('tasks',{
        template:'#tasks-template',
        props:['list'],
        create:function(){
            this.list = JSON.parse($this.list);
        }
    });
    new Vue({
        el:'body'
    })
</script>
</body>
</html>
keikeizhang
@extends('app')
@section('content')
    <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="{ $discussions }"></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>
@stop
keikeizhang

@JellyBool  我v-for使用有什么地方错了吗?froeach循环是可以显示数据的,但是用vue显示失败,我有点不清楚是什么地方出现问题,搞了一个上午没清楚,特来请教!

keikeizhang

表格倒是和vue视频里那样显示出来,但是里面没有值!

keikeizhang
{
    "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"
},
{
    "id": 6,
    "title": "Enim possimus eos consequatur cumque voluptatibus.",
    "body": "Temporibus voluptatem ut sint dolorem quibusdam exercitationem. Veniam dolorem commodi vel odit eum aut. Accusamus laboriosam illum sit eum dolores.",
    "user_id": 2,
    "last_user_id": 23,
    "created_at": "2016-09-09 05:16:20",
    "updated_at": "2016-09-09 05:16:20"
},
{
    "id": 7,
    "title": "Illo nostrum voluptatem provident.",
    "body": "In voluptas molestiae est quisquam aspernatur doloribus. Repudiandae explicabo ratione quo sit suscipit perspiciatis. Distinctio velit consequatur hic rerum repudiandae quisquam fuga.",
    "user_id": 30,
    "last_user_id": 8,
    "created_at": "2016-09-09 05:16:20",
    "updated_at": "2016-09-09 05:16:20"
},
{
    "id": 8,
    "title": "Maiores enim recusandae magni itaque.",
    "body": "Eius possimus a et iure error et. Rerum dolores quia architecto consequatur et vel omnis ut. Sit quia doloribus sint et similique.",
    "user_id": 29,
    "last_user_id": 8,
    "created_at": "2016-09-09 05:16:20",
    "updated_at": "2016-09-09 05:16:20"
},
{
    "id": 9,
    "title": "Cumque asperiores veniam culpa rerum modi sed modi et.",
    "body": "Dicta error voluptas et veritatis aut placeat. Explicabo voluptatum in vel nisi qui. Voluptas magnam sapiente rem non aut. Illum at ut unde mollitia facilis sunt. Delectus iste quo qui saepe.",
    "user_id": 30,
    "last_user_id": 19,
    "created_at": "2016-09-09 05:16:20",
    "updated_at": "2016-09-09 05:16:20"
}
keikeizhang

卡了

keikeizhang

上面是我测试用的模拟数据!

JellyBool

这种问题基本上是打开 chrome 开发者工具和打印一下数据就可以解决了

keikeizhang

谁还能解答一下,谢谢

perfectboook

我稍改了一点,可以正常运行, https://jsfiddle.net/perfectboook/qzw9arxf/。

this.list = JSON.parse($this.list);里面的$this肯定是有问题的。

keikeizhang 回复 perfectboook

谢谢!!!data里面可以用ajax吗?我这么写肯定是错的吧
Vue.component(‘tasks’,{
template:’#tasks-template’,
props:[‘list’],
create:function(){
this.list = JSON.parse(this.list);
}
});
new Vue({
el:‘body’,
data: {
var vm = this;
$.getJSON(‘api/tasks’,function(data){
vm.list = data;
})
}
})

JellyBool
  <div class="container">
        <tasks :list='{ $discussion }'></tasks>
    </div>

注意上面的 '{ $discussion }' 是单引号,list前面有冒号。 js 不用create了

<script>
    Vue.component('tasks',{
        template:'#tasks-template',
        props:['list']
    });
    new Vue({
        el:'body'
    })
</script>
keikeizhang 回复 JellyBool

ajax成功了,突然发现没有办法显示头像和用户名了!!!!