Javascript Vue.js组件单击事件未找到方法

我是VUE.JS的新手，我正在尝试将其集成到MVC项目中

在我的MVC视图中，我有我的应用程序div

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

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

当我试图运行应用程序时，它只是崩溃了，在控制台中它说“UpdateProduct未定义”。

---

对，我不确定问题可能是因为@RenderPage在javascript之前运行，并且试图将事件附加到一个当时不存在的方法，但是为什么我的属性bindig会起作用呢？{{description}}工作正常。当我为description和etc赋值时，我删除了代码，但在这种情况下这并不重要。有什么建议吗？

您在HTML中遗漏了括号，它应该如下所示：

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

说明：

这不是括号，而是缺少正确的标记

应该是

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

说明：

---

Vue属性都以v开头-除了在速记的情况下，在本例中可能是

@click=“UpdateProduct”

对，我已设法使其工作。 我向组件本身添加了方法选项，从那里我可以调用应用程序的方法

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


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

你错过了什么。 您的组件应该具有click方法，因此您应该将click添加到模板中，然后调用vue应用程序

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

---

哦，是的，我在编辑文章时错误地删除了它，但它仍然没有定义。

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


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

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