v-ifによるレイアウト崩れを防ぎたい

Question

v-ifを使って、表示非表示を切り替える際に、既にある要素に更に要素を表示する際、それによって元の要素の位置がずれ、レイアウトが崩れてしまうのですが、これを防ぐcssの記述はありますでしょうか？

position:fixedだとついてきてしまうので、その場に固定させる記述を知りたいです。

↓これは一例ですが、これらのテストの部分のレイアウトが、v-ifが効いてログインと登録ボタンが表示された際に崩れてしまう、ということです。

＜コード例＞
<template>

<div class="top-content"> <p>テスト</p> <p>テスト</p> <p>テスト</p> </div> </template> <div v-if="!beforeLogin"> <button @click="login()" > ログイン </button> </div> <button @click="signUp()" > 登録 </button> </div> <style> .top-content{ text-align: center; position:absolute; top:34px; left:60px; } </style>

Comments

[ka2obushi]

状況がわかりません。
`既にある要素に更に要素を表示する`というのはどういうことでしょうか？
再現するコードを記載してください。

Answer 1

v-if を v-show に変更した上でcss調整するのがよいのではないかと思いました。

また、コード例のdivの閉じタグが１つ多い気がしますが、そちらは問題とは無関係でしょうか。

<button @click="signUp()" >
登録
</button>

</div>　←　これの開始タグが見当たりませんでした。

Comments

[pansuki]

ご回答ありがとうございます。
v-showにしても特に状況変わらずでした・・・。
これは仮のコードなので、divタグは単純に記載ミスです、すみません。