V-chat-scroll with vue.js and framework7

Good afternoon
I’m trying to implement v-chat-scroll into my room.vue without success.

my current code looks like that.

<f7-block strong class= "room">
  <!-- Get roomcontent.message from Component message.vue -->
    <ul v-chat-scroll="{always: false, smooth: true, scrollonremoved:true, smoothonremoved: false}">
      <li v-for="value in roomcontent.message" :key=value.index>@{{ value }}</li>
      <li v-if="loading">&bull;&bull;&bull;</li>
    </ul>

</f7-block>

<f7-block> 
  <input type="text" class="form-control" name="message_input" placeholder="Type your message" v-model='message' @keyup.enter='send'>
</f7-block>

I’ve got this in app.js

// Import custom component and add it in new Vue to render it
import Message from '../components/message.vue';
import VueChatScroll from 'vue-chat-scroll';
Vue.use(VueChatScroll);

// Init Framework7-Vue Plugin
Framework7.use(Framework7Vue,lodash);
let newapp = null
firebase.auth().onAuthStateChanged(function(user) {
  console.log('user in app.js',user)
  if(user!=null){
    console.log('check in app.js')
    if ( user.emailVerified) {
      
      store.commit('setSignedIn',true)
      store.commit('setDisplayName',user.displayName)
      store.commit('setPhotoURL',user.photoURL)

    } else {
      // No user is signed in.
      store.commit('setSignedIn',false)
  
    }
  }

    if(!newapp){
    newapp = // Init App
    new Vue({
      el: '#app',

      render: (h) => h(App),
      store,
      // Register App Component
      components: {
        app: App,
        // Load custom components that have been imported
        message: Message,
      },
    });
  }

and this in message.vue

<template>

  <li><slot></slot></li>

</template>

<script>
  export default {
    mounted() {
      console.log('Component message mounted.')
    }
};
</script>

could you help me to understand why doesn’t it run ?

Thank you

Amaury

Maybe some live example or JSFiddle? It is not clear what is happening and what is exactly doesn’t work

Hi Vladimir,
It could be easier and quicker for me to share my screen or my project repo
Any slot available to schedule a meeting ?
Regards
Amaury

Try recording your screen and posting a YouTube link

1 Like

v-scroll video
does it help or do you need something else ? @kerrydp @nolimits4web ?
The v-scroll should automaticaly scroll-down to the last bottom message and it does not.
Thank you
Amaury

here you have,
jsfiddle

change it to your needs

Thank you @pvtallulah,
i’m currently trying to implement it with f7
I’m not such familiar with yet, could you provide some help in order to make me autonomous ?
Currently, the app does not failed to compiled, but does not display anything :frowning:
pastebin
Thank you
Amaury

kind of difficult what you are asking. you just share one view. did it work with dev?

Hello @pvtallulah
I understand,
currently I’m working on the following integration error

which leads to

// Init Messages
    messages: undefined.messages.create({
      el: '.messages',
      // First message rule
      firstMessageRule: function firstMessageRule(message, previousMessage, nextMessage) {
        // Skip if title
        if (message.isTitle) return false;
        /* if:
          - there is no previous message
          - or previous message type (send/received) is different
          - or previous message sender name is different
        */

        if (!previousMessage || previousMessage.type !== message.type || previousMessage.name !== message.name) return true;
        return false;
      }, 

which should be a miss declaration here (no “var” to declare which f7 / vue framework)

  on: {
    init () {
      

      // Init Messagebar
      var messagebar = this.messagebar.create({
        el: '.messagebar'
      });

      // Response flag
      var responseInProgress = false;

      // Send auto-response Message
      this.$('.send-link').on('click', function () {
        var text = messagebar.getValue().replace(/\n/g, '<br>').trim();
        // return if empty message
        if (!text.length) return;

        // Clear area
        messagebar.clear();

        // Return focus to area
        messagebar.focus();

        // Add message to messages
        messages.addMessage({
          text: text,
        });

        if (responseInProgress) return;
        // Receive dummy message
        receiveMessage();
      });    
    }
  },

I could be available to share my screen for a call or a chat if you’re available also, let me know.

Thank you for taking time to already answer =)
Amaury

replace this with app

Thanks =)
I’m going to continue debug


Could we plan a call during next days ?
Amaury

can you console.log(this) and console.log(app) and show the results here

Hello @pvtallulah

they are all undefined.
It would be easier in a chat or in a call then post our conclusion here
Would you be available ?

Thank you

Amaury

If this is undefined, your problem is outside your web-app…

if this is not undefined, then you can get your messagebar using:
this.$f7.messagebar.create... or this.$f7.messagebar.get... in Framework7Vue…

But without a fiddle it’s hard to tell

Hello @tiptronic
I’m available whenever you want for screensharing during a call
Thank you for your support
Regards
Amaury

Hey @AmauryVanEspen ,

I think you will get a quicker solution if you prepare a jsfiddle… Most of the people here (including me) are pretty busy with their own day-work, so chances for a one-to-one sessions are not good…

1 Like