Estou com um problema em mudar o estado de renderização de um elemento com o vue js. O mesmo foi gerado com um for
. O objetivo é fazer com que o box-body
do mini panel seja exibido ao clicar em button
. porém o estado v-if
é alterado somente quando eu disparo outro evento click em outro elemento aí ele renderiza o html.
<div class="col-lg-9">
<div class="row">
<div v-for="(beach, index) in markers" :key="index" class="col-md-3 mx-0 px-1 my-1">
<div class="box box-default box-solid">
<div class="box-header with-border">
<h3 class="box-title">{{beach.label}}</h3>
<div class="box-tools pull-right">
<button type="button" @click="beach.show =! beach.show;" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
</button>
</div>
</div>
<div v-if="beach.show">
<div class="box-body">
<h5>{{beach.infoText}}</h5>
</div>
</div>
</div>
</div>
</div>
</div>