theomessin / vue-chat-scroll

🖱️ Vue directive to keep things scrolled to the bottom.
https://jsfiddle.net/theomessin/n7542hk1/
MIT License
573 stars 76 forks source link

vue-chat-scroll doesn't work #29

Closed danilogacevic closed 6 years ago

danilogacevic commented 6 years ago

I'm using vue with laravel. This is where i include module.

require('./bootstrap');

window.Vue = require('vue');

import VueChatScroll from 'vue-chat-scroll'
import VeeValidate from 'vee-validate'

const config = {
    errorBagName : 'ferrors'
}

Vue.use(VeeValidate,config);
Vue.use(VueChatScroll);

Vue.component('chat-component', require('./components/ChatComponent.vue'));
const app = new Vue({
    el: '#app',

});

In my chat-component i registerer messages component. Message component code with v-chat-scroll setted:

<template>

    <ul class="chat" v-chat-scroll>
        <li v-bind:class="['clearfix', (message.admin) ? 'left' : 'right']"  v-for="message in messages"><span v-bind:class="['chat-img', (message.admin) ? 'pull-left' : 'pull-right']">
                            <img :src="[(message.admin) ? 'http://placehold.it/50/55C1E7/fff&text=U' : 'http://placehold.it/50/FA6F57/fff&text=ME']"   alt="User Avatar" class="img-circle" />
                        </span>
            <div class="chat-body clearfix">
                <div class="header">
                    <strong v-bind:class="['primary-font', (!message.admin) ? 'pull-right' : '']">Jack Sparrow</strong> <small v-bind:class="['text-muted', (message.admin) ? 'pull-right' : '']" v-text="sentOn(message)">
                    <span class="glyphicon glyphicon-time"></span></small>
                </div>
                <p v-text="message.body" v-bind:class="message.admin ? 'pull-left' : 'pull-right' "></p>
            </div>
        </li>

    </ul>

</template>

And it's not working. I can't figure out what am I doing wrong.

theomessin commented 6 years ago

Might seem like a silly question but you never know: any errors in the console?

danilogacevic commented 6 years ago

There is an error due to some other script. But I included my vue.js (and everything with it) before this .js file with errors. I have already installed several vue packages and everything works as expected.

theomessin commented 6 years ago

Code seems fine to me. I just tested it using a clean Laravel install and it works just fine (https://gist.github.com/theomessin/fadb633a8af704b856205844ff12a3c6). You can try using this component and playing around with it. It should work just fine on your end as well.

Only things that I can think of is either an issue with the pulling of the package or a conflict with other plugins...