在 Vue 中强制刷新词缀

Posted 2023-02-22

【中文标题】在 Vue 中强制刷新词缀

【英文标题】：Force refresh of an affix in Vue

【发布时间】：2017-12-22 13:39:00

【问题描述】：

我在 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>

【参考方案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 中，我无法访问 Jquery。即$ 未定义。

如果您使用的是npm。然后使用npm i jquery --save 安装jquery，然后全局导入jquery。 window.$ = window.jQuery = require('jquery') 在创建 Vue 实例之前。

我不想加载 jQuery 只是为了运行一个函数。有没有办法让bootstrap做上面的事情？