vue v-if/v-elseでボタンからスタイルを削除しない

Question

私はブートストラップを持つWebアプリケーションにvuejs2を使用しています。

私はv-ifとv-elseを持つ2つのブロックを持っているので、それらのうちの1つだけがレンダリングされます。これらのブロックにはそれぞれブートストラップボタンがあります。最初のdivからボタンを押すと、2番目のdivが表示され、逆も同様です。

問題は、最初のdivのボタンをクリックすると、2番目のdivのボタンが表示されますが、まだフォーカスされていますが、通常のボタンが必要ですが、アウトラインでフォーカスされています。あなたが最初のボタンを押すと、二つ目はまだ概略を示したもので、

<div id="app"> 
    <div v-if="switc"> 
     <button type="button" class="btn btn-secondary" @click="switc = !switc"> 
     <span >First</span> 
     </button> 
    </div> 
    <div v-else> 
    <button type="button" class="btn btn-secondary"> 
     <span>Second</span> 
     </button> 
    </div> 
    <br> <br> 
    <button type="button" class="btn btn-secondary" @click="switc = !switc"> 
    <span>Switch</span> 
    </button> 
</div> 

ここ

fiddleを働いている：ここでは

は、コードを簡略化されています。

Answer 1

私はこれを逃しました：key in v-if/else in docs。 Vueは要素をできるだけ効率的にレンダリングしようとします。レンダリングではなく、最初からレンダリングすることがよくあります。私の場合も、同じコンポーネントを使って完全に再描画しているようです。

<div v-if="switc"> 
     <button type="button" class="btn btn-secondary" @click="switc = !switc" key="first"> 
     <span >First</span> 
     </button> 
    </div> 
    <div v-else> 
    <button type="button" class="btn btn-secondary" key="second"> 
     <span>Second</span> 
     </button> 
    </div> 

更新フィドルhere：それを修正する

は、私は次のように、それぞれのボタンにkeyフィールドを追加する必要があります。