I am trying to show a edit button and then open a dialog box on cliking using mouseenter and mouseleave. On entering the edit button is displayed but as soon as i click on it it's getting hide. Can someone tell me what i am doing wrong here. The edit button is inside the DueDateAddM component.
<v-card-title class="mx-5">{{dayjs(key).format('DD MMM YYYY')}}</v-card-title>
<v-col v-for="(item, i) in value" :key="i">
<v-card-text
class="black--text py-0"
@mouseenter="item.isEdit=true"
@mouseleave="item.isEdit=false"
>
<v-row>
<span v-if="!item.isEdit" class="grey--text mr-1">#{{item.id}}</span>
<span
v-show="isLoggedIn"
v-if="item.isEdit"
class="mr-1"
@click="editDuedate"
>
<DuedateAddM :propItem="item" :duedateId="item.id" />
</span>
{{item.descp}}
<v-tooltip top>
<template v-slot:activator="{ on }">
<v-chip class="mx-1 py-0" small label v-on="on" v-if="item.previousdate">
<v-icon color="grey" small class="mr-1">fas fa-info-circle</v-icon>
<span>{{dayjs(item.previousdate).format("DD MMM YYYY")}}</span>
<span v-if="!item.previousdate">No Previous date found</span>
</v-chip>
</template>
<span>Previous Duedate</span>
</v-tooltip>
<v-tooltip top>
<template v-slot:activator="{ on }">
<v-chip small v-on="on" class="mx-1">
<v-icon color="grey" small class="mr-1">fas fa-tag</v-icon>
{{item.category}}
</v-chip>
</template>
<span>Category</span>
</v-tooltip>
<v-tooltip top>
<template v-slot:activator="{ on }">
<v-chip color="red lighten-4" small class="mx-1" v-on="on">
<v-icon color="grey" small class="mr-1">fas fa-map-marker-alt</v-icon>
{{item.region}}
</v-chip>
</template>
<span>Region</span>
</v-tooltip>
</v-row>
<v-row v-if="item.applicableto">
<v-subheader class="ml-1">Applicable To: "{{item.applicableto}}"</v-subheader>
</v-row>
<v-divider class="mt-2"></v-divider>
</v-card-text>
</v-col>
Use v-show instead of v-if