How to add a click function to an imported component in Vue

Question

So I have a Vue2 app. I have create a component "u-button"

when i import this and use it in another component, I want to be able to add a click function to it. However at the moment it looks for a function on the u-button component rather than the component it is being used in.

so for example, in the below if i click the first button nothing happens, if i click the second button i get the console log.

<template>
    <div>
        <u_button @click="clicked">Click me</u_button>
        <button @click="clicked">Click me</button>
    </div>
</template>

<script>
    import u_button from '../components/unify/u_button'

    export default {
        components: {
            u_button
        },
        methods: {
            clicked() {
                console.log("Working!");
            }
        }
    }

</script>

However if i add a method on the u-button component, then it calls that. So how can i get my below example to work ? The only thing I can think of is to wrap it in another div and add the click function to that. but I'm wondering if there is a better way?? I dont want to use events to do this either as that gets messy very quickly.

As you can imagine having a reusable button that when clicked always performs the same function is a bit pointless.

Possible duplicate of Vue v-on:click does not work on component — Sphinx
– Sphinx, Commented May 4, 2018 at 16:18

tony19 · Accepted Answer · 2022-07-15 22:24:41Z

4

It's because of the nature of components for example if we had a (virtual) iframe component which had a button in it and we'd like to detect click event on it we might name the event click and listen for it in the parent component; therefore, Vue introduced a feature called event modifiers for example in Vue, We have .native modifier (you can read more about the Vue modifiers here)

Now, to make your code work, You should add a .native after @click like this:

<u_button @click.native="clicked">Click me</u_button>

By the way, it's better to develop a naming convention for yourself It'd become handy when your projects get larger.

edited Jul 15, 2022 at 22:24

tony19

140k23 gold badges281 silver badges354 bronze badges

answered May 5, 2018 at 9:22

Farsad Fakhim

1581 silver badge6 bronze badges

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

Collectives™ on Stack Overflow

How to add a click function to an imported component in Vue

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related