Question

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

在我的MVC视图中，我有我的app div。

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

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

组件正常渲染并获取数据库以获得正常工作的数据。

<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>

但是，当我尝试触发事件/从组件更改vm的数据时，它根本不起作用。

以下是我从组件中移除道具的实际js以及来自vm的大量数据，以提高可读性。

 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

         });
    },

当我尝试运行应用程序时，它只是崩溃，并在控制台中显示“UpdateProduct未定义”。对，我不确定问题可能是因为@RenderPage在javascript之前运行并尝试将事件附加到当时不存在的方法，但是为什么我的属性bindig会起作用？ {{description}}工作正常。我在为描述等分配值时删除了代码，但在这种情况下无关紧要。有什么建议吗？

Answer 1

这不是括号，而是缺乏适当的标记。

应该是

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

Vue属性都以v-开头，除非是速记的情况，在这种情况下可能是@click="UpdateProduct"

Answer 2

你错过了HTML中的括号，它应该如下：

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

Answer 3

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

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


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

Answer 4

您缺少什么。您的组件应具有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.js组件单击事件未查找方法

4 个答案: