problem description
the component of vue-bootstrap is used for development, and the component b-tab is used. The judgment of v-if is embedded in the component. There is no problem with the change of the value listened to by v-if, but the corresponding change of dom is wrong when the value changes for the first time.
the environmental background of the problems and what methods you have tried
related codes
/ / Please paste the code text below (do not replace the code with pictures)
template code of tab:
<b-tabs>
<b-tab>
<template slot="title">
<div @click="onTransTabClick">
<div v-if="isTransActive">
<img src="../assets/imgs/icons/wallet/ic_transaction_solid.svg"><span class="tab-title">Transaction</span>
</div>
<div v-if="!isTransActive">
<img src="../assets/imgs/icons/wallet/ic_transaction_line.svg"><span class="tab-title">Transaction</span>
</div>
</div>
</template>
</b-tab>
<b-tab>
<template slot="title">
<div @click="onLeaseTabClick">
<div v-if="!isTransActive">
<img src="../assets/imgs/icons/wallet/ic_card_solid.svg"><span class="tab-title">Leasing</span>
</div>
<div v-if="isTransActive">
<img src="../assets/imgs/icons/wallet/ic_card_line.svg"><span class="tab-title">Leasing</span>
</div>
</div>
</template>
</b-tab>
</b-tabs>I use isTransActive to determine which tab, is changed with the change of tab, but the corresponding image does not change at the first change of isTransActive, and then the change of the image is always reversed.
what result do you expect? What is the error message actually seen?
you can take a look at the screenshot:
this is the initial state:
tab:
: