mardi 2 janvier 2018

laravel 5.4/ vue js dont iterate my array

Hello I want to make a loop to iterate an array of data retrieve from a controller but I have an error message in vue js I can not find where is my error help me please I start with a vue js here is my code

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
                });
        }
},

view

        <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="'/' + 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="'/' +  post.slug" class="user_name"> @</a> <br>
         <span style="color:#AAADB3">  @
             <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">
                                    /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 == ''">
                                        <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" >
                    @

                </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 : @

                    @endif
                </div>
            </div>

            </div>

web.php

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

posts [ ] return this

[{"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 enter image description here



from Newest questions tagged laravel-5 - Stack Overflow http://ift.tt/2CptweB
via IFTTT

Aucun commentaire:

Enregistrer un commentaire