Vue.js component click event not finding method

Question

I'm fairly new to VUE.JS and I'm trying to integrate it into an MVC project.

In my MVC view I have my app div.

@RenderPage("~/Views/Product/Templates/product-details-template.cshtml")

<div id="app">
      <product-details-component></product-details-component>
</div>

The component is rendering fine and fetching the database for data which also works fine.

<template id="product-details-container">
        <div class="wrapper">
            <div class="container-body">
                <div class="container-header">
                    <h1>3 Year Discount</h1>
                    <span class="details"><i   class="fa fa-long-arrow-left"></i> Back to Product Details</span>
                </div>
                <div class="container-table">
                    <table class="table-product-details">
                        <tr>
                            <td on:click="UpdateProduct" class="table-title spaceUnder">Description: </td>
                            <td class="table-value spaceUnder">{{ description }}</td>
                            <td class="table-title spaceUnder">Product Code: </td>
                            <td class="table-value spaceUnder">{{ code }}</td>
                            <td class="table-title spaceUnder">Scheme Code: </td>
                            <td class="table-value spaceUnder">{{ schemecode }}</td>
                        </tr>

But when I'm trying to fire an event / change the data of vm from the component it simply doesn't work.

Here is the actual js I removed the props from the component and a lot of data from the vm for better readability.

 Vue.component('product-details-component', {
        template: '#product-details-container'       
    });


    var vm = new Vue({
        el: '#app',
        data: {
            show: true               
        }, 

        beforeMount() {

    this.UpdateProduct();    

    },
    methods: {
        UpdateProduct: function() {
            axios.get('myapiurl' + this.productId)
                 .then(function(response) {

             var data = response.data;      
             // assigning data to the vm

         });
    },

When i try to run the application it just crashes and in the console it says "UpdateProduct is not defined". Right Im not sure maybe the problem is because @RenderPage is running before the javascript and trying to attach the event to a method that doesn't exist at that time, but then why would my attribute bindig work? {{ description }} is working fine. I removed the code when I assign value to description and etc but it doesn't matter in this case. Any suggestions?

Justin MacArthur · Accepted Answer · 2017-01-25 22:53:40Z

3

It's not the parenthesis but the lack of proper tagging.

it should be

<td v-on:click="UpdateProduct" class="table-title spaceUnder">Description: </td>

Vue properties all start with v- except in cases of the shorthand which in this case could be @click="UpdateProduct"

answered Jan 25, 2017 at 22:53

Justin MacArthur

4,05024 silver badges27 bronze badges

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

1 Comment

Sóskuthy András Over a year ago

Oh yeah I have deleted that by mistake while editing the post, but it is still not defined. <td @@click="UpdateProduct" .... Uncaught ReferenceError: UpdateProduct is not defined at o.eval (eval at Vr (vue.min.js:7), <anonymous>:2:279)

Saurabh · Accepted Answer · 2017-01-25 17:54:29Z

0

You have missed parenthesis in HTML, it should be like following:

<td on:click="UpdateProduct()" class="table-title spaceUnder">Description: </td>

answered Jan 25, 2017 at 17:54

Saurabh

73.8k44 gold badges193 silver badges251 bronze badges

Comments

Sóskuthy András · Accepted Answer · 2017-01-26 10:41:11Z

0

Right I have managed to make it work. I added methods options to the component itself, and from there I can call the app's method.

Vue.component('product-details-component', {
    template: '#product-details-container',
    methods: {
        CallMethod: function(){
            return vm.MethodIwantToCall();
        }
    }


var vm = new Vue({ ....
methods: {
MethodIwantToCall () => ...
}

answered Jan 26, 2017 at 10:41

Sóskuthy András

813 silver badges13 bronze badges

Comments

Pablo · Accepted Answer · 2018-07-04 14:54:43Z

0

You are missing something. Your component should have the click method, so yo should add the click into your template and then call to vue app.

Vue.component('product-details-component', {
    template: '#product-details-container',
    methods:{
        UpdateProduct: function() {
             //Here you are calling your real method from the template
             vm.UpdateProduct();
        }
}
});

answered Jul 4, 2018 at 14:54

Pablo

11 silver badge2 bronze badges

Comments

Mohsen_AB · Accepted Answer · 2022-02-12 07:51:16Z

0

change @click to @@click

    <div id="app">
        <button @@click="count++">{{ count }}</button>
    </div>


    <script type="module">
    
            import { createApp } from 'vue'
    
            const app = createApp({
                data() {
                    return {
                        count: 0
                    }
                }
            })
    
            app.mount('#app')
    
   </script>

answered Feb 12, 2022 at 7:51

Mohsen_AB

391 silver badge5 bronze badges

Collectives™ on Stack Overflow

Vue.js component click event not finding method

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related