Vue.js call component/instance method

Question

I have three files:

SingleFileComponent.js
app_index.js
index.html

I declare my template in the 'SingleFileComponent.js' file, import it in 'app_index.js', create my Vue instance there and then import both in my 'index.html', where I use

<single-file-component></single-file-component>

to create a button.

SingleFileComponent.js

export default {
    template:"<button type='button' value='test'>{{ text }}</button>",
    props: [
        'text',
    ]
}

app_index.js

import SingleFileComponent from './SingleFileComponent.js';

new Vue({
    el: '#app',
    components: {
        SingleFileComponent,
    },
    methods: {
        on_click: function() {
            alert('import')
        }
    }
});

index.html

<html>
<head>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="#">
    <script src="vue.min.js"></script>
    <title>Vue.js Single File Component</title>
</head>
<body>
    <div id="app">
        <single-file-component id="test" text="Test" @click="on_click()"></single-file-component>
    </div>
    <div>
        <button type="button" id="direct" @click="onclick()">Direct</button>
    </div>
    <script>
        var direct = new Vue({
            el: '#direct',
            methods: {
                onclick: function() {
                    alert('Direct instance')
                }
            }
        })
    </script>
    <script type="module" src="singlefilecomponent.js"></script>
    <script type="module" src="app_index.js"></script>
</body>
</html>

I want to call the 'on_click' method from my Vue instance, when a click event happens. But it doesn't call it nor does it give me an error.

It also doesn't call anything, when I replace

methods: {
    on_click: function() {
        alert('import')
    }
}

with

filters: {
    on_click: function() {
        alert('import')
    }
}

As stated above, I declared the method in the instance ('app_index.js'), which wasn't working.

Then I declared it in the component ('SingleFileComponent.js'), which wasn't working either.

But when I create a Vue instance in the HTML file itself and declare a method there and bind it with a click event, it works perfectly.

Where do I have to declare a method for my component, so that I can call it, when a click event happens on the button, which was created with <single-file-component> tag?

Sajib Khan · Accepted Answer · 2018-07-10 12:20:23Z

2

Modify SingleFileComponent.js

export default {
  template:"<button type='button' v-on:click="onClick"  value='test'>{{ text }}</button>",
  props: [
    'text',
  ],
  methods: {
    onClick: function(e) {
      console.log('e: ', e);
      alert('onClick method is invoked!');
    }
  }
}

edited Jul 10, 2018 at 12:20

answered Jul 10, 2018 at 12:16

Sajib Khan

24.4k9 gold badges69 silver badges79 bronze badges

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

1 Comment

LLJ97 Over a year ago

Perfect, thank you. Was a bit blind not to see this.

Collectives™ on Stack Overflow

Vue.js call component/instance method

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related