onclick event not firing in vue.js

Question

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?

Can you show code for ti-button component

Nermin
– Nermin

2018-10-17 17:59:42 +00:00
Commented Oct 17, 2018 at 17:59 — Nermin
– Nermin, Commented Oct 17, 2018 at 17:59
I added the button code

omega
– omega

2018-10-17 18:31:00 +00:00
Commented Oct 17, 2018 at 18:31 — omega
– omega, Commented Oct 17, 2018 at 18:31
Do you have any component code for the ti-button ?

Nermin
– Nermin

2018-10-17 18:33:24 +00:00
Commented Oct 17, 2018 at 18:33 — Nermin
– Nermin, Commented Oct 17, 2018 at 18:33
ok added that too

omega
– omega

2018-10-17 18:34:06 +00:00
Commented Oct 17, 2018 at 18:34 — omega
– omega, Commented Oct 17, 2018 at 18:34
@omega what went wrong with my answer?

Boussadjra Brahim
– Boussadjra Brahim

2018-10-17 18:37:32 +00:00
Commented Oct 17, 2018 at 18:37 — Boussadjra Brahim
– Boussadjra Brahim, Commented Oct 17, 2018 at 18:37

Nermin · Accepted Answer · 2018-10-17 18:37:37Z

3

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>

edited Oct 17, 2018 at 18:37

answered Oct 17, 2018 at 18:24

Nermin

6,11015 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

omega Over a year ago

This worked, didn't know you need to propagate events up like that.

Nermin Over a year ago

Clicking on black box should produce nothing, but when you define events in it, and listen for those events you can hear something. Components are black boxes, they have inputs and outputs, nothing else

tony19 · Accepted Answer · 2022-07-16 00:53:23Z

1

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>

edited Jul 16, 2022 at 0:53

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Oct 17, 2018 at 18:13

Husam Elbashir

7,1953 gold badges20 silver badges32 bronze badges

1 Comment

Husam Elbashir Over a year ago

Well I guess it's the way Vue works according to the docs1/2

Boussadjra Brahim · Accepted Answer · 2018-10-17 18:50:15Z

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

Collectives™ on Stack Overflow

onclick event not firing in vue.js

3 Answers 3

2 Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Related