Join the Stack Overflow Community
Stack Overflow is a community of 6.9 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 0 down vote favorite

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?

share|improve this question
up vote 1 down vote

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"

share|improve this answer
    
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) – Sóskuthy András Jan 26 at 10:30
up vote 0 down vote

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

<td on:click="UpdateProduct()" class="table-title spaceUnder">Description: </td>
share|improve this answer
up vote 0 down vote

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 () => ...
}
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.