Vueの添付ファイルを強制的にリフレッシュ

Question

私はVue JSページ内にブートストラップアタッチメントを使用しています。私が最初に接辞を含むルートに移動すると（接辞の視認性はv-ifによって制御されます）、それはスクロールで完全に機能します。しかし、をそのルートからに移動してからに戻すと、に戻っても、接尾辞は壊れています。ページの上部にこもり、スクロールしません。

私はjqueryを使用していましたが、$('#affix').affix('checkPosition')に電話をかけて接辞の位置を強制的に変更することができますが、jqueryにはアクセスできません。

私は、Vueが最初の読み込み時に接辞を作成し、その後同じDOMオブジェクトをキャッシュして後で使用することが問題であると考えます。しかし、それがページに再挿入されると、ブートストラップはもはやそれを認識せず、付加動作が中断します。この時点で

は、私はこの問題を解決するだろうそのいずれかが、いくつかのオプションを持っていると思う：

• は、Vueのコンポーネント内からのjQueryを呼び出すためのスマートな方法はありますか？私は他の場所でJqueryを使用していないので、そうではないでしょう。
• ブートストラップアタックスを強制的に更新する方法はありますか？
• 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