V-chat-scroll with vue.js and framework7

Questions
1

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

2

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

3

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

4

Try recording your screen and posting a YouTube link

1 Like
5

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

6

here you have,
jsfiddle

change it to your needs

7

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

8

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

9

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

image
image1663×267 20.1 KB

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

10

replace this with app

11

Thanks =)
I’m going to continue debug

image
image1013×313 19 KB

Could we plan a call during next days ?
Amaury

12

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

13

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

14

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

15

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

16

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