在 Vue 中强制刷新词缀

Question

我在 Vue JS 页面中使用引导词缀。当我第一次导航到包含词缀的路线时（词缀的可见性通过v-if 控制），它与滚动完美配合。但是，当我从该路线离开然后再次返回时，词缀被破坏：它卡在页面顶部并且不滚动。

我在网上发现，如果我使用 jquery，我可以调用 $('#affix').affix('checkPosition') 来强制重新定位词缀（但我无法访问 jquery）。

我怀疑问题在于 Vue 在第一次加载时创建了词缀，然后缓存了相同的 DOM 对象以供以后使用。但是当它被重新插入到页面中时，bootstrap 不再意识到它并且粘贴行为中断了。

在这一点上，我想我有几个选择，其中任何一个都可以解决这个问题：

• 是否有一种从 Vue 组件中调用 Jquery 的智能方法？我没有在其他任何地方使用 Jquery，所以宁愿不使用。
• 有没有办法强制 Bootstrap 词缀刷新？
• 有没有办法强制 Vue 不缓存这个组件，每次加载都会创建一个新组件？
• 有没有更好的使用 Vue 创建词缀的方法？

谢谢！

这里是关注的 Vue 组件：

<template>
  <div id="funclist-affix" class="panel panel-default" data-spy="affix" data-offset-top="155">
    <div class="panel-body">
      <h4>Functions</h4>
      <div class="list-group function-list">
        <router-link v-for="(func,line) in functions" :key="line" :to="'#' + func.name" :class="['list-group-item', 'code', {uncovered: func.uncovered}]" :title="func.name">{{ func.name }}</router-link>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'functionList',
  data () {
    return {

    }
  },
  props: ['functions']
}
</script>

<style>
a {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#funclist-affix {
  max-height: calc(100% - 2 * 20px);
  overflow-y: auto;
}
</style>

Answer 1

你可以使用 jQuery。

<template>
  <!-- notice ref="myAffix" -->
  <div ref="myAffix" id="funclist-affix" class="panel panel-default" data-spy="affix" data-offset-top="155">
    <!-- content -->
  </div>
</template>

在你的组件脚本中：

<script>    
export default {
  name: 'functionList',
  data () {
    return {

    }
  },
  props: ['functions'],
  mounted() {
    this.$refs.myAffix.affix('checkPosition')
  }
}
</script>

编辑：你也可以使用vue-strap，它有一个词缀组件。

https://github.com/yuche/vue-strap