dimanche 13 septembre 2020

When I passing data from my Laravel Blade file to Vue Component it show "PHP Fatal error: Method App\Reply::__toString() must not throw an exception"

When I am logged In, it works fine. But if I visit the site as a guest this error pops up when i visit that particular page. "PHP Fatal error: Method App\Reply::__toString() must not throw an exception, caught ErrorException: Trying to get property 'id' of non-object"

<reply-component :attributes="" inline-template>
    <div>
        <div class="d-flex pt-1 justify-content-between px-1">
            <small class="px-2 font-weight-bold text-muted">
                <a href="" class="text-decoration-none"> </a> said 
            </small>

           @if(Auth::check())
                @can("view",$reply)
                <Favourite v-bind:reply=" "></Favourite>
                @endcan
           @endif
        </div>

        <div class="d-flex  align-items-center p-2">
             <img src="/images/default.png" alt="No image" height="50" width="50" class="rounded-circle">

                <div v-if="editing" class="w-100">
                    <div class="form-group">
                        <textarea v-model="body"rows="1" class="form-control mx-2"></textarea>
                    </div>
                    <button class="btn btn-sm btn-primary" v-on:click="updateReply">Update</button>
                    <button class="btn btn-sm btn-dark" v-on:click="editing=false">Cancel</button>
                </div>
                <div v-else v-text="body"></div>

        </div>
        <div class="card-footer d-flex justify-content-between">
            @if(Auth::check())
                @can('update', $reply)
                <div class="d-flex">
                <button class="btn btn-danger " @click="destroy">Delete</button>
                    <button class="btn btn-secondary btn-sm ml-2" v-on:click="editing=true">Update</button>
                </div>
                @endcan
            @endif

        </div>
    </div>
</reply-component>

this where I pass the data to he Vue component.

<script>
import Favourite from './Favourite.vue';
export default {
    components:{
        Favourite,
    },
data() {
    return {
        editing:false,
        body:this.attributes.body
    }
},
props:["attributes"],
methods: {
     destroy()
            {
               axios.delete("/replies/"+this.attributes.id);
               $(this.$el).fadeOut(300,()=>{
                   flash("Reply has been deleted");
               });


            },

      updateReply()
            {
                axios.patch("/replies/"+this.attributes.id,{
                    body:this.body
                });

                this.editing = false;
                flash("Reply has been updated");


            },

},
}
</script>

this is my Reply.vue component.




Aucun commentaire:

Enregistrer un commentaire