can not view vuejs content with jquery

it must be practically two days that I break my head on a dynamic chat-box. the content of my chat-box is managed by vujs and the data prevent from firebase. for that I use Vuejs 2.x, Laravel 5.4, jQuery and firebase of google. Voic so my problem

• I made a chat-box whose code the view is the following

Vue.component('chat-composer',{

template:''+
        ''+
            '<textarea rows="2" class="form-control" v-model="messageText" v-on:keyup.enter="sendMessage" placeholder="Entrez votre message ici ..."></textarea>'+
    '',
data:function(){
    return {
        messageText:'',
        receiver:parseInt($('.span-container-receiver-id').attr('data-receiver-id'))
    }
},

    props:['messages'],
    methods:{
        sendMessage:function(){
            if (this.messageText.length==0) {
                return false;
            }else{
                this.$emit('messagesent',{
                    message:this.messageText,
                    receiver_id:this.receiver,
                    messageForSender:true,
                    //hour:moment(moment(), "YYYY-MM-DD hh:mm:ss").fromNow()
                    hour:moment().format('Y-m-d H:m:s')
                });
            }

            this.messageText="";
        }
    }
});

Vue.component('message',{
    template:'<div class="__message__">'+
                '<div class="clearfix" :title="message.hour">'+
                    '<div v-if="message.messageForSender">'+
                        '<div class="chat-message-content speech-bubble-right clearfix">'+
                            '<p></p>'+
                        '</div>'+       
                        /*'<span class="chat-time-right"></span>'+*/
                    '</div>'+
                    '<div v-else>'+
                        '<div class="avatar chat-list-item-photo">'+
                            '<img :src="message.avatar" class="avatar-thumb-forum-subject">'+
                        '</div>'+
                        '<div class="chat-message-content speech-bubble-left clearfix">'+
                            '<p></p>'+
                        '</div>'+       
                        /*'<span class="chat-time-left"></span>'+*/
                    '</div>'+
                '</div>'+
            '</div>',

    props:['messages'],
    props:['message'],

    methods:{

    },

});

var chat_log = Vue.component('chat-log', {
    template:'  '+
    '<div class="chat-log">'+
      '<message v-for="(message,index) in messages" :message="message" :key="message.id"></message>'+
      '<div class="empty" v-show="messages.length === 0">'+
        '<div style="font-style:italic">Aucun message</div>'+
      '</div>'+
    '</div>',

  props:['messages']
});

window.chatLog = chat_log;

const chat = new Vue({
    data : {
        messages:[],
        receiver_id:parseInt($('.span-container-receiver-id').attr('data-receiver-id')),
        sender_id:$('.span-container-sender-id').attr('.data-sender-id')
    },

    firebase : {
        anArray: db.ref('chat/'+bd_ref_firebase()).limitToLast(20),  
    },

    methods:{
        sendMessage(message){

            console.log(this.$firebaseRefs.anArray);
            console.log();

            if (userIsConnect()==false) {
                haveFuid($('.data-sender-fuid').attr('value'));
            }
            this.$firebaseRefs.anArray.push(message);
            this.messages.push(message);
            axios.post('/messages',message).then(responses=>{
                if (!responses.data.status) {
                    toastr.error(responses.data.motif);
                    console.log('Erreur');
                }else{
                    //this.messages.push(message);
                    //toastr.success(responses.data.message);
                }
            });       

        },

        getHourForDate:function(date){
            return ;
        },

        isMessageOfSender(id_sender){
            var user_id_connect = parseInt($('.span-container-sender-id').attr('data-sender-id'));

            if (user_id_connect == id_sender) {
                return true;
            }
            else
                return false;

        }
    },
    created(){
        console.log(fire_messages);

        if (fire_messages==null || fire_messages.length == 0) {
            axios.get('/messages?receiver_id='+this.receiver_id).then(responses=>{
                var input_to_push= [];
                var array = [];
                $.each(responses.data,function(index,value){
                    input_to_push = {
                        message:value.message,
                        //hour:moment(value.created_at, "YYYY-MM-DD hh:mm:ss").fromNow(),
                        hour:thisDateMoreThanOneDay(value.created_at),
                        messageForSender:isMessageOfSender(this.sender_id),
                        avatar:$('.span-container-receiver-id').find('.data-receiver-avatar').attr('value')
                    };

                    array.push(input_to_push);
                });
                this.messages = array;
            }); 
        }else{
            var input_to_push= [];
                var array = [];
                fire_messages.once('value', function(snapshot) {
                  snapshot.forEach(function(childSnapshot) {
                    var childKey = childSnapshot.key;
                    var childData = childSnapshot.val();
                    input_to_push = {
                        receiver_id:childData.receiver_id,
                        message:childData.message,
                        hour:thisDateMoreThanOneDay(childData.hour),
                        messageForSender:childData.messageForSender,
                        avatar:$('.span-container-receiver-id').find('.data-receiver-avatar').attr('value')
                    };
                    array.push(input_to_push);
                  });
                });
                /*$.each(fire_messages,function(index,value){
                    input_to_push = {
                        message:value.message,
                        hour:thisDateMoreThanOneDay(value.hour),
                        messageForSender:isMessageOfSender(this.sender_id),
                        avatar:$('.span-container-receiver-id').find('.data-receiver-avatar').attr('value')
                    };
                    array.push(input_to_push);
                });*/
                this.messages = array;
        }
    }

}).$mount('#live-chat');

function isMessageOfSender(id_sender){
    var user_id_connect = parseInt($('.span-container-sender-id').attr('data-sender-id'));

    if (user_id_connect == id_sender) {
        return true;
    }
    else
        return false;   
}

the tag <chat-log> </ chat-log> a component viewjs allowing me to display the messages of two conversions - here is the code viewjs allowing me to extract the firebase data and displayed in <chat-log> </ chat-log> box.blade.php: {code}

<span class="span-container-receiver-id" data-receiver-id=""><span class="data-receiver-name" value=" "></span><span class="data-receiver-avatar" value=""></span>
        <span class="data-receiver-login" value=""> </span></span>`

    

    <span class="span-container-sender-id" data-sender-id="">
        <span class="data-sender-name" value=" "></span>
        <span class="data-sender-fuid" value=""></span>
        <span class="data-sender-email" value=""></span>
        <span class="data-sender-avatar" value=""></span>
        <span class="data-sender-login" value=""></span>
    </span>

    <div id="live-chat-content">        
        <header class="clearfix">           
            <a href="#" class="chat-close">x</a>
            <h4></h4>
            <span class="chat-message-counter">3</span>
        </header>
        <div class="chat" style="">     
            <div class="chat-history">
                <div class="previous-messages-history"></div>
                <chat-log :messages="messages"></chat-log>
            </div> <!-- end chat-history -->
            <form action="#" method="post" class="chat-form">
                <fieldset>                  
                    <chat-composer  v-on:messagesent="sendMessage"></chat-composer>
                    <input type="hidden">
                </fieldset>
            </form>
            <div class="chat-option">
                <i class="fa fa-file-image-o" aria-hidden="true"></i> &nbsp;&nbsp;&nbsp;&nbsp;
                <i class="fa fa-meh-o" aria-hidden="true"></i> &nbsp;&nbsp;&nbsp;&nbsp; 
                <i class="fa fa-thumbs-o-up" aria-hidden="true"></i> &nbsp;&nbsp;&nbsp;&nbsp; 
            </div> 
        </div> <!-- end chat -->
    </div> <!-- end live-chat -->

    <script>

    </script>

---

procedure

I to a list of users, the user commonly connected to a user of the list here is the code jquery to display the chat box

function getBoxChat (receiver_id) {
$ .get (__ baseUrl + '/ getBox /' + receiver_id, function (data) {
$ ( 'Block-chatbox.') Html (data).
} 

here is my route Route :: get ('getBox/{receiver}', 'ChatController@getBox');

here is the code in the controller

$ receiver = \App\Models\User :: find ($ receiver_id);
        return\View::make('chat.components.box')
                        ->with('receiver',$receiver)
                        ->render();

what fragment of php code does is convert the contents of the file box.blade.php (see code above) and return it as character string

that I display with jquery with $('.block-chatbox').html(data);

problem the components vuejs seen are not interpreted. here is the code inspect in the browser:

Any help will be welcome. Thank u

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