[Vuejs]-Nuxt/Vue @Click Value Fires only Once

by

0👍

✅

To fix and solv use emit an event in LoadItem.vue. Similar than:

Change on LoadItem.vue – Options API

<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false,
      required: true,
    },
  },
  methods: {
    emitClose() {
      this.$emit("close");
    },
  },
};
</script>

and on template:
<Dialog as="div" class="relative z-10" @close="emitClose">

Composition API

<script setup>
import { ref, defineProps, defineEmit } from 'vue';

const props = defineProps({
  show: {
    type: Boolean,
    default: false,
    required: true,
  },
});

const emitClose = () => {
  defineEmit(['close']);
  emit('close');
};
</script>

On ProductGrid.vue component:

<!-- ProductGrid.vue -->
<LoadItem v-if="show" :show="show" @close="show = false" />

Leave a comment