.ps class gets removed by dynamic v-bind:class

[donaldma]

Versions

vue2-perfect-scrollbar: ^1.2.1 vue: ^2.6.8

Description

The default .ps class that is initialized by perfect-scrollbar gets removed when I dynamically set other classes.

Example vue code:

<perfect-scrollbar
    :class="{
        largeScreen: isLargeScreen,
        defaultScreen: isDefaultScreen
    }"
>
    <slot />
</perfect-scrollbar>

Example compiled code (initial):

<div class="ps defaultScreen">
  <div class="ps__rail-x" style="left: 0px; bottom: 0px;">
    <div class="ps__thumb-x" tabindex="0" style="left: 0px; width: 0px;"></div>
  </div>
  <div class="ps__rail-y" style="top: 0px; right: 0px;">
    <div class="ps__thumb-y" tabindex="0" style="top: 0px; height: 0px;"></div>
  </div>
  <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
    the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of
    type and scrambled it to make a type specimen book. It has survived not only five centuries, but
    also the leap into electronic typesetting, remaining essentially unchanged. It was popularised
    in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
    recently with desktop publishing software like Aldus PageMaker including versions of Lorem
    Ipsum.
  </p>
  <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
    the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of
    type and scrambled it to make a type specimen book. It has survived not only five centuries, but
    also the leap into electronic typesetting, remaining essentially unchanged. It was popularised
    in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
    recently with desktop publishing software like Aldus PageMaker including versions of Lorem
    Ipsum.
  </p>
</div>

Example compiled code (after a change triggers .largeScreen class to be added): *notice .ps gets removed

<div class="largeScreen">
  <div class="ps__rail-x" style="left: 0px; bottom: 0px;">
    <div class="ps__thumb-x" tabindex="0" style="left: 0px; width: 0px;"></div>
  </div>
  <div class="ps__rail-y" style="top: 0px; right: 0px;">
    <div class="ps__thumb-y" tabindex="0" style="top: 0px; height: 0px;"></div>
  </div>
  <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
    the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of
    type and scrambled it to make a type specimen book. It has survived not only five centuries, but
    also the leap into electronic typesetting, remaining essentially unchanged. It was popularised
    in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
    recently with desktop publishing software like Aldus PageMaker including versions of Lorem
    Ipsum.
  </p>
  <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
    the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of
    type and scrambled it to make a type specimen book. It has survived not only five centuries, but
    also the leap into electronic typesetting, remaining essentially unchanged. It was popularised
    in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
    recently with desktop publishing software like Aldus PageMaker including versions of Lorem
    Ipsum.
  </p>
  <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
    the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of
    type and scrambled it to make a type specimen book. It has survived not only five centuries, but
    also the leap into electronic typesetting, remaining essentially unchanged. It was popularised
    in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
    recently with desktop publishing software like Aldus PageMaker including versions of Lorem
    Ipsum.
  </p>
</div>

My hunch is that it has something to do with the actual v-bind:class from vue. This can be fixed in the mean time by ensuring .ps is always a static class on the root element of <perfect-scrollbar />.

[mercs600]

@donaldma thank you. I will check and fix it ;-)

[mercs600]

So.. the problem is that .ps class is added by native js way in perfect scrollbar sources. Then Vue.js during generate classes for vnode and merge classes takes into account only vnode classes I mean staticClass and class - so these classes can be only added on vue component level. See more here https://github.com/vuejs/vue/blob/e90cc60c4718a69e2c919275a999b7370141f3bf/dist/vue.runtime.common.dev.js#L5484 and issue related with that -> https://github.com/vuejs/vue/issues/3975

But this is expected behaviour - so the better way is just add this class on component level. You can pull new version ;-)

[donaldma]

Hey @mercs600 thanks for the quick response :)

The fix is exactly what I need but it seems like you haven't re-built the dist folder after the code change so it didn't propagate the change (can confirm this by adding your change inside the dist files)

[mercs600]

Aww.. I'm sorry man, I forgot this repo has dist files, now it should be ok ;-)

[donaldma]

Thanks a lot :)