Question

我在Vue JS页面中使用bootstrap词缀。当我第一次导航到包含词缀的路线时（通过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

在Vue中强制刷新词缀

1 个答案: