Issue with toggling functionality in Vue.js between two identical components

Question

Issue with toggling functionality in Vue.js between two identical components

Within the template of another component, I have two components that can be toggled based on clicks on "reply" and "edit" buttons.

<comment-form :model="model" :model-id="modelId" :comment="comment" v-if="showEditForm && canComment" @closeForm="closeForm"></comment-form>
<comment-form :model="model" :model-id="modelId" :parent-id="comment.id" :reply-to="comment" v-if="showReplyForm && canComment" @closeForm="closeForm"></comment-form>

The current issue is that after clicking "edit" and then "reply," it appears that the "edit" form remains open instead of closing and opening the "reply" form as desired.

These methods control the display of the forms:

methods: {
    closeForm: function () {
        this.showReplyForm = false;
        this.showEditForm = false;
    },
    reply: function () {
        this.showReplyForm = true;
        this.showEditForm = false;
    },
    editComment: function () {
        this.showEditForm = true;
        this.showReplyForm = false;
    },
},

I am looking to understand why this behavior is occurring and how to correct it.

For reference, here is the complete comment.vue file:

<template>
     // The rest of the content has been omitted for brevity. 
  </script>

javascript vue.js vue-component

Answer 1

Answer №1

It's quite surprising, but in this case, you require a key. It's unusual to need one outside of a v-for.

The issue arises because you have the same component in two separate v-if conditions. When Vue attempts to update, it recognizes that it should display a comment-form, which is already present. This results in Vue not detecting the changes. While I consider it to be a flaw in Vue, the workaround involves providing a unique key to each instance of the component.

new Vue({
  el: '#app',
  data: {
    showEditForm: true,
    showReplyForm: false
  },
  components: {
    commentForm: {
        methods: {
        close() {
            this.$emit('close-form');
        }
      }
    }
  },
  methods: {
    closeForm: function() {
      this.showReplyForm = false;
      this.showEditForm = false;
    },
    reply: function() {
      this.showReplyForm = true;
      this.showEditForm = false;
    },
    editComment: function() {
      this.showEditForm = true;
      this.showReplyForm = false;
    },
  }
})

<script src="//unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  <button @click="reply">
    Reply
  </button>
  <button @click="editComment">
    Edit
  </button>
  <comment-form v-if="showEditForm" key="edit" @close-form="closeForm" inline-template>
    <div>
      This is the edit form
      <button @click="close">
        Close it
      </button>
    </div>
  </comment-form>
  <comment-form id="reply" key="reply" v-if="showReplyForm" @close-form="closeForm" inline-template>
    <div>
      This is the reply form
      <button @click="close">
        Close it
      </button>
    </div>
  </comment-form>
</div>

Answer 2

It's quite surprising, but in this case, you require a key. It's unusual to need one outside of a v-for.

The issue arises because you have the same component in two separate v-if conditions. When Vue attempts to update, it recognizes that it should display a comment-form, which is already present. This results in Vue not detecting the changes. While I consider it to be a flaw in Vue, the workaround involves providing a unique key to each instance of the component.

new Vue({
  el: '#app',
  data: {
    showEditForm: true,
    showReplyForm: false
  },
  components: {
    commentForm: {
        methods: {
        close() {
            this.$emit('close-form');
        }
      }
    }
  },
  methods: {
    closeForm: function() {
      this.showReplyForm = false;
      this.showEditForm = false;
    },
    reply: function() {
      this.showReplyForm = true;
      this.showEditForm = false;
    },
    editComment: function() {
      this.showEditForm = true;
      this.showReplyForm = false;
    },
  }
})

<script src="//unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  <button @click="reply">
    Reply
  </button>
  <button @click="editComment">
    Edit
  </button>
  <comment-form v-if="showEditForm" key="edit" @close-form="closeForm" inline-template>
    <div>
      This is the edit form
      <button @click="close">
        Close it
      </button>
    </div>
  </comment-form>
  <comment-form id="reply" key="reply" v-if="showReplyForm" @close-form="closeForm" inline-template>
    <div>
      This is the reply form
      <button @click="close">
        Close it
      </button>
    </div>
  </comment-form>
</div>

Issue with toggling functionality in Vue.js between two identical components

Answer №1

Similar questions

Pass multiple variables as input to a function, then query a JSON array to retrieve multiple array values as the output

How to create a manual mock for @material-ui withStyles in React using Jest

Utilize the WebGLRenderTarget again

Creating a dropdown menu in Vue.js with a nested array

Regex: Enabling commas in the name of an Excel file

Insert a picture within the text input field

Having difficulty parsing or assigning JSON response: The response is being interpreted as [object Object]

The router is unable to direct when an item is clicked

Generating a fresh array by filtering out elements with specific properties using the .map() method

Vue.js - When Property is Undefined and How to Render it in Browser

Verifying if a dropdown option has been chosen through validation in JavaScript

Error message in vuejs: JSON parsing error detected due to an unexpected "<" symbol at the beginning

How can we eliminate duplicate arrays of objects within a multi-dimensional array using ReactJS and JavaScript?

Saving numerical data from Firebase using Vue.js

What could be causing the issue with the Vue CLI not working after installation via npm 6.9.0?

Unlocking protection: Confirming password strength and security with password indicator and regular expressions for special characters in angular through directive

Is there a built-in constant in the Angular framework that automatically resolves a promise as soon as it

Establishing the properties of an object as it is being structured within a nested data format

Exploring MongoDB's $in and $ne Operators

Exploring Vue.js with the composition API, delving into the world of "Mixins" and mastering life-cycle hooks