Question

我尝试在动态Vue元素上使用vuebar使用自定义滚动条。由于v-if会破坏并重新创建元素，因此之后不会激活vuebar。在提供的示例中，您可以看到滚动条起作用，直到您更改选项卡为止。我知道您可以使用v-show并开始工作，但是该解决方案无法在具有复杂关系的嵌套组件中实现。

<div class="vuebar-element" v-bar v-if="tab==0">
  <div> 
    tab 0 
  </div>
</div>
<div class="vuebar-element" v-bar v-if="tab==1">
  <div> 
    tab 1 
  </div>
</div>

http://jsfiddle.net/ebwdnqfs/2/

Answer 1

阅读@ ssc-hrep3的评论后，我发现将整个内容放入标签神奇地解决了这个问题。

<transition>
<div class="vuebar-element" v-bar v-if="tab==0">
  <div> 
    tab 0 
  </div>
</div>
<div class="vuebar-element" v-bar v-if="tab==1">
  <div> 
    tab 1 
  </div>
</div>
</transition>

Vue v-if破坏滚动条插件

1 个答案: