Issue with v-if in vuejs

Question

I have a modal. In that modal I am displaying a table. One of tr of that table is like below

<tr>
    <td class="ui header">Name</td>
    <td v-if="editValue">
        <input type="text">
        <input type="submit" value="Submit">                                 
    </td>
    <td v-else>
        {{ addressObj.name }}  
        <span @click="change_value" class="edit_span">
              Edit
        </span>   
    </td>
</tr>

The change_value is like below

change_value() {
    this.editValue = true;
}

If I click on Edit the input box is displayed but the modal is disappearing.

tony19 · Accepted Answer · 2022-07-15 02:00:41Z

1

@click.stop.prevent="change_value"

It's likely that the click has somehow triggered the modal closing. Adding event.stopPropogation() and event.preventDefault() should help you avoid that.

.prevent add 'event.preventDefault()' to the click event

.stop add 'event.stopPropogation()' to the click event

See https://v2.vuejs.org/v2/guide/events.html#Event-Modifiers

edited Jul 15, 2022 at 2:00

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Mar 31, 2018 at 7:21

Jacob Goh

20.9k5 gold badges57 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Issue with v-if in vuejs

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related