CODEWITHSUNDEEP
javascriptvue.jsvuejs2
omega
omega

Reputation: 43913

onclick event not firing in vue.js

I have the following 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);
        }
    });

when I click on my custom button, nothing happens. I think it's because its looking for onSubmit in the ti-button component, but how do I get it to look in the ti-page-inquire component?

Upvotes: 1

Views: 3741

Answers (3)

Husam Elbashir
Husam Elbashir

Reputation: 7197

This might be because you need to listen for a native click event. So you need to use the .native modifier ..

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

This will only work if the button is the root element of your ti-button component. Otherwise you'll have to pass your event listeners to your button in the ti-button component like this ..

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

Upvotes: 1

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

Try to emit an event from ti-button component to the parent one by using 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 it called in the parent component like v-on:submit="onSubmit" and handled using 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);             
         }
        }
    });

Sometimes you need also to emit some parameters, so you could do it like :

    this.$emit('submit',params)

params could be of any type

Upvotes: 0

Nermin
Nermin

Reputation: 6100

Components are black boxes you should catch all events inside it and emit them to the outer world.

Fiddle example

Vue.component('ti-button', {
    props: ['button'],
    template: '#ti-button',
    mounted: function () {
        // ripple on button
        mdc.ripple.MDCRipple.attachTo(this.$el);
    },
    methods: {
      buttonClicked: function() {
        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>

Upvotes: 3

Related Questions