v-if and v-else shows while page is loading? - vue.js

Question

Problem is that both divs shows on load. I tried to use v-cloak only on one but its not working. If i put on parent div then its not look good while is hidden. Any suggestion how can i display only one div while page is loading, but without v-cloak?
<div class="center_image" v-if="avatarImageSet">
<div class="checked">
<div class="seller_image {{ in_role('BusinessUsers') ? 'agency' : '' }}">
<img src="{{ home_asset('img/very_big_user_icon.png') }}" alt="" />
</div>
<div class="check_profile business">
<i class="fa fa-check"></i>
</div>
</div>
</div>
<div class="center_image" v-else>
<div class="checked">
<div class="seller_image">
<img v-bind:src="user_credentials.avatar" alt="Avatar"/>
</div>
<div class="check_profile business">
<i class="fa fa-check"></i>
</div>
</div>
</div>

Answer 1

This might be happening because of other errors in your code, like:
<img src="{{ home_asset('img/very_big_user_icon.png') }}" alt="" />, you should use v-bind with src
class="seller_image {{ in_role('BusinessUsers') ? 'agency' : '' }}" You should be using dynamic class binding here.
See modified code:
<div class="center_image" v-if="avatarImageSet">
<div class="checked">
<div class="seller_image" :class="{`yourclass`: in_role('BusinessUsers') === 'agency'}">
<img :src="home_asset('img/very_big_user_icon.png')" alt="" />
</div>
<div class="check_profile business">
<i class="fa fa-check"></i>
</div>
</div>
</div>
<div class="center_image" v-else>
<div class="checked">
<div class="seller_image">
<img v-bind:src="user_credentials.avatar" alt="Avatar"/>
</div>
<div class="check_profile business">
<i class="fa fa-check"></i>
</div>
</div>
</div>