Компонент события Vue.js не найден метод

Question

Я довольно новичок в VUE.JS, и я пытаюсь интегрировать его в проект MVC.

В моем представлении MVC у меня есть мое приложение 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> 

Но когда я пытаюсь сгореть событие/изменить данные Ут из компонента он просто не работает.

Вот фактический 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

Вы пропустили скобку в HTML, так и должно быть следующее:

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

Answer 2

Это не скобка, но отсутствие надлежащей маркировки.

должно быть

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

Vue свойства начинаются с v-, за исключением случаев стенографии, который в этом случае может быть @click="UpdateProduct"

Answer 3

Right Мне удалось заставить его работать. Я добавил параметры метода самому компоненту, и оттуда я могу вызвать метод приложения.

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


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