Vue.js not firing onclick event

Question

Vue.js not firing onclick event

Here is a code snippet for a Vue.js template:

<script type="text/x-template" id="ti-page-inquire">
    <div>
        <h3 class="mdc-typography--headline3">{{page.name}}</h3>
        <ti-button v-bind:button="page.button" v-on:click="onSubmit"></ti-button>
    </div>
</script>

<script type="text/x-template" id="ti-button">
    <button class="mdc-button mdc-button--raised" v-bind:title="button.name">{{button.name}}</button>
</script>

script

    Vue.component('ti-page-inquire', { 
        props: ['page'],
        template: '#ti-page-inquire',
        methods : {
            onSubmit : function() {
                alert(1);             
            }
        }
    });

    Vue.component('ti-button', {
        props: ['button'],
        template: '#ti-button',
        mounted: function () {
            // ripple on button
            mdc.ripple.MDCRipple.attachTo(this.$el);
        }
    });

Upon clicking the custom button, no action seems to be triggered. It appears that the issue lies in locating the onSubmit function within the ti-button component rather than the ti-page-inquire component. How can I direct it to search within the correct component?

javascript vue.js vuejs2

Answer 1

Answer №1

When it comes to components, think of them as 'black boxes' where you capture all events and then broadcast them to the outer world.

Check out this Fiddle example for reference

Vue.component('ti-button', {
    props: ['button'],
    template: '#ti-button',
    mounted: function () {
        // Add ripple effect to button
        mdc.ripple.MDCRipple.attachTo(this.$el);
    },
    methods: {
      buttonClicked: function() {
        // Emit event when button is clicked
        this.$emit('button-clicked');
      }
    }
});


<script type="text/x-template" id="ti-page-inquire">
    <div>
        <h3 class="mdc-typography--headline3">{{page.name}}</h3>
        <ti-button v-bind:button="page.button" v-on:button-clicked="onSubmit"></ti-button>
    </div>
</script>

<script type="text/x-template" id="ti-button">
    <button class="mdc-button mdc-button--raised" v-bind:title="button.name" @clicked="buttonClicked">{{button.name}}</button>
</script>

Answer 2

When it comes to components, think of them as 'black boxes' where you capture all events and then broadcast them to the outer world.

Check out this Fiddle example for reference

Vue.component('ti-button', {
    props: ['button'],
    template: '#ti-button',
    mounted: function () {
        // Add ripple effect to button
        mdc.ripple.MDCRipple.attachTo(this.$el);
    },
    methods: {
      buttonClicked: function() {
        // Emit event when button is clicked
        this.$emit('button-clicked');
      }
    }
});


<script type="text/x-template" id="ti-page-inquire">
    <div>
        <h3 class="mdc-typography--headline3">{{page.name}}</h3>
        <ti-button v-bind:button="page.button" v-on:button-clicked="onSubmit"></ti-button>
    </div>
</script>

<script type="text/x-template" id="ti-button">
    <button class="mdc-button mdc-button--raised" v-bind:title="button.name" @clicked="buttonClicked">{{button.name}}</button>
</script>

Answer 3

Answer №2

The reason for this issue could be that you are required to listen for a native click event. In order to achieve this, you must utilize the .native modifier.

<ti-button v-bind:button="page.button" v-on:click.native="onSubmit"></ti-button>

This method will only function correctly if the button serves as the root element within your ti-button component. Alternatively, if the button is not the root element, you will need to pass your event listeners to the button within the ti-button component like so:

<button v-on="$listeners" ...> ... </button>

Answer 4

The reason for this issue could be that you are required to listen for a native click event. In order to achieve this, you must utilize the .native modifier.

<ti-button v-bind:button="page.button" v-on:click.native="onSubmit"></ti-button>

This method will only function correctly if the button serves as the root element within your ti-button component. Alternatively, if the button is not the root element, you will need to pass your event listeners to the button within the ti-button component like so:

<button v-on="$listeners" ...> ... </button>

Answer 5

Answer №3

One way to send an event from the child component ti-button to its parent is by using the this.$emit function :

Vue.component('ti-button', {
  props: ['name'],
  template: '#vButton',

  data: {
    name: 'hi'
  },
  methods: {
    submit() {
      this.$emit('submit')
    }
  }
});

<template id="vButton">
    <button v-bind:title="name" @click="submit">{{name}}</button>
</template>

The emitted event submit can then be listened for in the parent component with v-on:submit="onSubmit" and handled using the onSubmit method:

<script type="text/x-template" id="ti-page-inquire">
  <div>
    <h3 class="mdc-typography--headline3">{{page.name}}</h3>
    <ti-button v-bind:button="page.button" v-on:submit="onSubmit"></ti-button>
  </div>
</script>

Vue.component('ti-page-inquire', { 
   props: ['page'],
   template: '#ti-page-inquire',
    methods : {
        onSubmit : function() {
            alert(1);             
        }
    }
});

If you need to pass parameters along with the event, you can do so like this :

this.$emit('submit',params)

The variable params can contain any type of data.

Answer 6

One way to send an event from the child component ti-button to its parent is by using the this.$emit function :

Vue.component('ti-button', {
  props: ['name'],
  template: '#vButton',

  data: {
    name: 'hi'
  },
  methods: {
    submit() {
      this.$emit('submit')
    }
  }
});

<template id="vButton">
    <button v-bind:title="name" @click="submit">{{name}}</button>
</template>

The emitted event submit can then be listened for in the parent component with v-on:submit="onSubmit" and handled using the onSubmit method:

<script type="text/x-template" id="ti-page-inquire">
  <div>
    <h3 class="mdc-typography--headline3">{{page.name}}</h3>
    <ti-button v-bind:button="page.button" v-on:submit="onSubmit"></ti-button>
  </div>
</script>

Vue.component('ti-page-inquire', { 
   props: ['page'],
   template: '#ti-page-inquire',
    methods : {
        onSubmit : function() {
            alert(1);             
        }
    }
});

If you need to pass parameters along with the event, you can do so like this :

this.$emit('submit',params)

The variable params can contain any type of data.

Vue.js not firing onclick event

Answer №1

Answer №2

Answer №3

Similar questions

Animating the dimensions of objects in THREEjs

Sort by the date using a specific data attribute

Minifying Angular using grunt leads to 'Error initializing module' issue

What is the process for uploading an image and entering text into the same row in Google Sheets?

By utilizing geocoordinates, arrange items in order of proximity to the individual's current location

Vue.js is throwing an error because it cannot find the property or method "blah" when referencing it during rendering

Is there a way to embed HTML code within a JavaScript variable?

Utilize another function located within a JavaScript module

As the cursor moves, the image follows along and rotates in sync with its

The functionality of the Bootstrap carousel appears to be malfunctioning

The command "babel-node" is not recognized as either an internal or external command - Babel 7

Changing a password for a user account using Keycloak Identity Provider

Guide to displaying a task within a table cell after a user submits the form

Disappearing Image on Hover in JavaScript and HTML

How to specifically exclude a checkbox from the "select all" function in J

Converting a string representing time to a date object in Angular

When implementing JWT for route authentication, the webpage remains frozen in one spot

Creating custom shaders in three.js that can receive shadows involves a few key steps. Let

Having difficulty grasping the concept of using unicode characters with canvas fillText

Creating rows within a table in React.js using the map method: Techniques to follow