Closing a Vue.js component on click

Question

I'm currently working on a small project, but I'm stuck and can't find the correct answer that I'm looking for so maybe someone can help me out here.

So what i have are 2 components where the parent component calls the child component like so:

<open-pokemon
        v-if="open"
        :pokemon-name="clickedPokemon"
        :type="clickedPokemonType"
        >
</open-pokemon>

The openPokemon component also got a closing button to close the component what I want to do is to delete the component from the dom, but it still needs to be rendered when the openPokemon gets called again.

Anyway here is the closing method:

closePokemon: function (e) {
            document.getElementById(e).classList.add('close');
            self = this;
            self.$destroy();
            self.$el.parentNode.removeChild(self.$el);
        }

And here is my html for that:

<div id="pokemon-single" class="c-pokemon__single-open" :class="type">
                    <div class="flex justify-end">
                        <button @click="closePokemon('pokemon-single')" class="c-pokemon__single-close">
                            X
                        </button>
                    </div>
                </div>

While this will work i can't seem to figure out why I can't rerender the component when i call it again in the parent component. Any help would be appreciated. If you need more information let me know.

Maybe I'm missing something, but why not simply set the open property, the one used by v-if, to false? — Hovercraft Full Of Eels
– Hovercraft Full Of Eels, Commented Mar 16, 2022 at 23:41
Please do not use vanilla JS (classList, removeChild etc...) while using Vue. Use the state to trigger things in your DOM. — kissu
– kissu, Commented Mar 16, 2022 at 23:56
So emit the button press to the parent, and in the parent's response to the emit, change the open property to false. — Hovercraft Full Of Eels
– Hovercraft Full Of Eels, Commented Mar 17, 2022 at 0:19
Thanks I upvoted your reply, but marked the answer down below @HovercraftFullOfEels — Keygun2k1
– Keygun2k1, Commented Mar 17, 2022 at 8:00

cam · Accepted Answer · 2022-03-17 01:08:10Z

4

Solution

Emit a close event from the child when the close button is clicked.
Listen for the close event in the parent and set open to false.

Child (OpenPokemon)

<template>
  <div id="pokemon-single" class="c-pokemon__single-open" :class="type">
    <div class="flex justify-end">
      <button @click="close" class="c-pokemon__single-close">X</button>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    close () {
      this.$emit('close')
    }
  }
}
</script>

Parent

<template>
  <div>
    <open-pokemon
      v-if="open"
      :pokemon-name="clickedPokemon"
      :type="clickedPokemonType"
      @close="open = false"
    />
  </div>
</template>

answered Mar 17, 2022 at 1:08

cam

3,7301 gold badge16 silver badges20 bronze badges

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

1 Comment

Keygun2k1 Over a year ago

Thanks indeed i had to emit close and listen for it in the parent!

Collectives™ on Stack Overflow

Closing a Vue.js component on click

1 Answer 1

Solution

Child (OpenPokemon)

Parent

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Solution

Child (OpenPokemon)

Parent

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related