Simplebar: Problem when using the package with Vue

[dyegonery]

Hey guys. I'm facing an issue when trying to use this plugin within a Vue component. Here's my code:

<ul data-simplebar class="conversation-list">
                        <div v-for="message in conversation.messages" v-bind:key="message.id">
                            <li class="clearfix" @if="message.fk_sender == curr_contact">
                                <div class="chat-avatar">
                                    <img :src="activeContact.photo_url" :alt="activeContact.firt_name">
                                    <i>{{ message.created_at }}</i>
                                </div>
                                <div class="conversation-text">
                                    <div class="ctext-wrap">
                                        <i>{{ activeContact.first_name }}</i>
                                        <p>
                                            {{ message.message }}
                                        </p>
                                    </div>
                                </div>
                            </li>
                            <li class="clearfix odd" @if="message.fk_sender != curr_contact">
                                <div class="chat-avatar">
                                    <img src="/images/female_avatar.png" alt="Female">
                                    <i>10:01</i>
                                </div>
                                <div class="conversation-text">
                                    <div class="ctext-wrap">
                                        <i>Smith</i>
                                        <p>
                                            Hi, How are you? What about our next meeting?
                                        </p>
                                    </div>
                                </div>
                            </li>
                        </div>
                    </ul>

When I put static content inside the

, the bar works just fine. The problem is when I add the dynamic content, as shown. Then, the divs generated by the loop are placed outside the div.simplebar-content created by the simplebar plugin. I'm using on a browser with enabled js. Can someone help me with this? I don't know if I'm doing something wrong, since the documentation says that the plugin should take care of dynamic content, except for older browsers...

[Grsmto]

Is you content loaded asynchronously? Like from a server? The problem if it's the case is that SimpleBar must be initialised only after your content has been set. And any further content needs to be added using the getContentElement() function.

I think you can try to do this way by pre-defining the required DOM directly:

<ul data-simplebar class="conversation-list">
    <div class="simplebar-scroll-content">
        <div class="simplebar-content">
            <div v-for="message in conversation.messages" v-bind:key="message.id">
                ...
            </div>
        </div>
    </div>
</ul>

It's not ideal but I'm currently working on a new version of the plugin to improve compatibility with frameworks like Vue, React, Angular...Also will think about adding examples to make it simple to implement!

Let me know if that works. Thanks.

[dyegonery]

Yeah, this worked. Thanks @Grsmto.

[jpfernandezl]

This is a Vue.js wrapper:
https://gist.github.com/jpfernandezl/2dbf7cab593dec87eb080d6c1ae274ae

[waxapi]

Is you content loaded asynchronously? Like from a server? The problem if it's the case is that SimpleBar must be initialised only after your content has been set. And any further content needs to be added using the getContentElement() function.

I think you can try to do this way by pre-defining the required DOM directly:

<ul data-simplebar class="conversation-list">
    <div class="simplebar-scroll-content">
        <div class="simplebar-content">
            <div v-for="message in conversation.messages" v-bind:key="message.id">
                ...
            </div>
        </div>
    </div>
</ul>

It's not ideal but I'm currently working on a new version of the plugin to improve compatibility with frameworks like Vue, React, Angular...Also will think about adding examples to make it simple to implement!

Let me know if that works. Thanks.

Simplebar was broken for me when using Vue and adding data to a list dynamically.

I fixed by doing this. Thanks for the help @Grsmto

<div class="messages" data-simplebar>
   <div class="simplebar-wrapper" style="margin: -10px;">
      <div class="simplebar-height-auto-observer-wrapper">
         <div class="simplebar-height-auto-observer"></div>
      </div>
      <div class="simplebar-mask">
         <div class="simplebar-offset" style="right: 0px; bottom: 0px;">
            <div class="simplebar-content" style="padding: 10px; height: 100%; overflow: hidden;">
               <div class="msg" v-for="(msg, index) in messages" :key="index">
                  <img :src="msg.avatar" width="75" sizes="35px" class="avatar" />
                  <div class="wrapper">
                     <div class="info">
                        <div class="name">{{ msg.username }}</div>
                        <div class="lvl">{{ msg.lvl }}</div>
                     </div>
                     <div class="message">{{ msg.message }}</div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
   <div class="simplebar-placeholder" style="width: 303px; height: 361px;"></div>
</div>

[Grsmto]

@waxapi hey, there is now a Vue js plugin so you shouldn't even need to do this manually.
yarn add simplebar-vue