create a vue modal with vue 2

Hi all so its my first attempt to create a vue modal, i have a current project running which in Laravel 9 so this is what i have tried, in my resources/js/admin/app-components/hello-world.vue i have created the hello-world component that looks like this

	<template>
		<modal name="hello-world">
    		hello, world!
			     <button @click="$modal.show('hello-world')">Show Modal</button>
		</modal>
	</template>

	<script>
	export default {
		data: {
    		name: "hello-world",
	    },

	methods: {
        show() {
            this.$modal.show(this.hello - world);
        },
        hide() {
            this.$modal.hide('hello-world');
          }
      }
   }
  </script>

then in my resources/views/admin/supplier/index.blade.php file i have created this button to call the show method but when i click on it it does no open and displaying hello-world

	<hello-world></hello-world>

I then added the methods in my resources/js/admin/supplier/Listing.js and imported the component but still no luck Here is the the supplier/listing.js content

    Vue.component('supplier-listing', {
    mixins: [AppListing],
    components: {
        'whatsapp-link': WhatsAppLink,
        'call-link': CallLink,
        'hello-world': helloworld
   },
   data: {
        name: "hello-world",
    },

    methods: {
        show() {
            this.$modal.show('hello-world');
        },
        hide() {
            this.$modal.hide('hello-world');
        }
    }
});

LaryAI

3 years ago

Level 58

It looks like there are a few issues with the code provided. Here's a revised version that should work:

In your hello-world.vue file:

<template>
  <modal name="hello-world">
    <p>hello, world!</p>
  </modal>
</template>

<script>
export default {
  name: "hello-world",
  methods: {
    show() {
      this.$modal.show("hello-world");
    },
    hide() {
      this.$modal.hide("hello-world");
    },
  },
};
</script>

In your supplier/listing.js file:

import HelloWorld from "../app-components/hello-world.vue";

Vue.component("supplier-listing", {
  mixins: [AppListing],
  components: {
    "whatsapp-link": WhatsAppLink,
    "call-link": CallLink,
    "hello-world": HelloWorld,
  },
  methods: {
    showHelloWorld() {
      this.$refs.helloWorld.show();
    },
    hideHelloWorld() {
      this.$refs.helloWorld.hide();
    },
  },
});

In your supplier/index.blade.php file:

<button @click="showHelloWorld()">Show Modal</button>
<hello-world ref="helloWorld"></hello-world>

Explanation:

In the hello-world.vue file, I removed the data property and moved the name property to the component options object. I also wrapped the "hello, world!" text in a <p> tag for clarity.
In the supplier/listing.js file, I imported the hello-world component and added showHelloWorld and hideHelloWorld methods that call the corresponding methods in the hello-world component using a ref.
In the supplier/index.blade.php file, I added a ref to the hello-world component and changed the @click event to call the showHelloWorld method.

Note that you'll need to make sure that the Vue instance is properly set up and that the $modal plugin is installed. You can refer to the Vue documentation and the Laravel documentation for more information on how to do this.

Dirk313

3 years ago

Level 4

Nope still not working when the button is clicked the modal does not open

Please or to participate in this conversation.