Nuxt/Vue Click Event Triggers Single Time

Question

Nuxt/Vue Click Event Triggers Single Time

In my project, I have two components - 'ProductGrid.Vue' and 'LoadItem.vue' (which functions as a side-loader menu).

Currently, both components have a Prop named show. However, once the LoadItem menu is closed, I am unable to trigger show = true again.

You can test this behavior Here

ProductGrid.Vue

<!-- Code for ProductGrid.Vue component -->

LoadItem.vue

<!-- Code for LoadItem.vue component -->

I am facing an issue where after closing the LoadItem component, I cannot reopen it in the ProductGrid component. Any assistance or guidance on this issue would be greatly appreciated.

As I am still learning Vue/Nuxt, any help will be valuable. Thank you!

typescript vue.js nuxt.js vue-component nuxt3.js

Answer 1

Answer №1

If you need to resolve an issue, consider triggering an event in LoadItem.vue. Here is an example:

Modification in LoadItem.vue - Options API

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

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

Using 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>

Within the ProductGrid.vue component:

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

Answer 2

If you need to resolve an issue, consider triggering an event in LoadItem.vue. Here is an example:

Modification in LoadItem.vue - Options API

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

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

Using 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>

Within the ProductGrid.vue component:

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

Nuxt/Vue Click Event Triggers Single Time

Answer №1

Similar questions

Slice an interactive div

A guide on refreshing the dependencies list within Angular's node modules and package.json files

The error message "TypeError: text is not a function" is displayed when trying to utilize the text() method from either Blob

Vue js version 2.5.16 will automatically detect an available port

Uncover the mystery behind the return value of a generic function in TypeScript

The Ion-item-option button requires two clicks to activate

Passing props to component data in Vuejs: Best practices

An exploration on integrating a controller into an Angular directive class using Typescript

Assigning a dynamic name to an object in Typescript is a powerful feature

Vuejs allows objects to trigger the execution of methods through elements

In Angular 5, you can easily prevent interaction with a related button by disabling it when the corresponding reactive

Creating a high-quality select input component in Vue 3 that functions effectively

Using a Typescript variable prior to its assignment

Promise<IDropdownOption[]> converted to <IDropdownOption[]>

Is there a way to iterate through objects and update their values safely in typescript?

Typescript encounters an overload error on the Accumulator argument while using reduce operation

Encountering an error: Vue full screen package throws a "this.$refs.fullscreen.toggle is not a function"

What causes the undefined value of "this" in the Vue Composition API setup function?

Error message occurs during compilation of basic Vue file in Webpack

Is there a way to retrieve the chosen value from an ion-alert radio alert?