Question

你好我想做一个循环迭代从控制器检索的数据数组但我在vue js中有一条错误消息我找不到我的错误在哪里帮助我请我从vue js开始这是我的代码

Controller.php这样

public function index(){


        $post= Posts::with('likes','comments', 'user')->orderBy('created_at','DESC')->get();
return $post ;
}

vue.js

const root = new Vue({
        el: '#root',
        data: {
            msg: 'Update New Post:',
            content: '',
            posts: []
        },

        ready: function ready() {
            this.created();
        },

        created: function created() {
            var _this = this;

            axios.get('http://localhost:8000/mur/posts')
                .then(response => {
                    _this.posts = response.data;
                    //we are putting data into our posts array
                    console.log(response.data);

                    // show if success
                    Vue.filter('myOwnTime', function(value){
                        return moment(value).fromNow();
                    });
                })
                .catch(function (error) {
                    console.log(error); // run if we have error
                });
        }
},

查看

        <div v-for="post, key in posts">
            <div class="col-md-12 col-sm-12 col-xs-12 all_posts">
                <div class="col-md-1 pull-left">
                    <img :src="'{{asset('storage/avatar')}}/' + post.avatar"
                         style="width:50px;">
                </div>

                <div class="col-md-10" style="margin-left:10px">
                    <div class="row">
                        <div class="col-md-11">
                            <p><a :href="'{{url('profile')}}/' +  post.slug" class="user_name"> @{{post.user.name}}</a> <br>
         <span style="color:#AAADB3">  @{{ post.created_at }}
             <i class="fa fa-globe"></i></span></p>
                        </div>
                        <div class="col-md-1 pull-right">
                        @if(Auth::check())
                            <!-- delete button goes here -->
                                <a href="#" data-toggle="dropdown" aria-haspopup="true">
                                    {{--<img src="{{Config::get('app.url')}}/public/img/settings.png" width="20">--}}
                                </a>
                                <div class="dropdown-menu">
                                    <li><a>some action here</a></li>
                                    <li><a>some more action</a></li>
                                    <div class="dropdown-divider"></div>
                                    <li v-if="post.user_id == '{{Auth::user()->id}}'">
                                        <a @click="deletePost(post.id)">
                                        <i class="fa fa-trash"></i> Delete </a>
                                    </li>
                                </div>
                            @endif
                        </div>
                    </div>


                </div>

                <p class="col-md-12" style="color:#000; margin-top:15px; font-family:inherit" >
                    @{{post.content}}

                </p>
                <div style="padding:10px; border-top:1px solid #ddd" class="col-md-12">
                    <!-- like button goes here -->
                    @if(Auth::check())
                        <div v-for="">
                            <div v-if="">
                                <p class="likeBtn" @click="likePost(post.id)">
                                <i class="fa fa-heart-o"></i> 
                                </p>
                            </div>

                        </div>
                       data : @{{ post.likes.length }}

                    @endif
                </div>
            </div>

            </div>

web.php

Route::get('mur/posts', 'PostController@index');

帖子[]返回此

[{"id":8,
"user_id":3,
"content":"content 1",
"status":0,
"created_at":"2017-12-27 22:43:20",
"updated_at":"2017-12-27 22:43:20",
"likes":[{"id":2,"posts_id":7,"user_id":3,"created_at":"2017-12-27 16:38:33","updated_at":null}],
"comments":[],
"user":{
  "id":3,"name":"toto","sulg":"toto","email":"toto@hotmail.fr","avatar":"215563.jpg","is_actif":"activ\u00e9","created_at":"2017-12-06 15:30:42","updated_at":"2017-12-06 17:04:41"}
},
{"id":7,
"user_id":9,
"content":"coucou",
"status":0,
"created_at":"2017-12-27 16:07:01",
"updated_at":"2017-12-27 16:07:01",
"likes":[{"id":2,"posts_id":7,"user_id":4,"created_at":"2017-12-27 16:38:33","updated_at":null}],
"comments":[],
"user":{"id":9,"name":"blop","sulg":"blop","email":"blop@gmail.com","avatar":"logoBee.png","is_actif":"activ\u00e9","created_at":"2017-12-17 14:37:29","updated_at":"2017-12-17 14:37:29"}}

error in console

laravel 5.4 / vue js不要迭代我的数组

0 个答案: