Vue.js Komponente klicken Ereignis nicht finden Methode

Question

Ich bin ziemlich neu in VUE.JS und ich versuche, es in ein MVC-Projekt zu integrieren.

In meiner MVC Ansicht habe ich meine App Div.

Die Komponente ist fein Rendering und holt die Datenbank für Daten, die auch gut funktioniert.

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

Aber wenn ich versuche, ein Ereignis zu feuern/ändern, um die Daten von vm aus der Komponente einfach funktioniert es nicht.

Hier ist die tatsächliche js Ich entfernte die Requisiten aus der Komponente und eine Menge Daten von der VM für bessere Lesbarkeit.

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 

     }); 
    }, 

Wenn ich versuche, die Anwendung es nur stürzt und in der Konsole sagt, es laufen zu lassen „UpdateProduct ist nicht definiert“. Richtig Ich bin nicht sicher, vielleicht liegt das Problem daran, dass @RenderPage vor dem Javascript ausgeführt wird und versucht, das Ereignis an eine Methode anzuhängen, die zu diesem Zeitpunkt nicht existiert, aber warum würde dann mein Attribut bindig funktionieren? {{description}} funktioniert einwandfrei. Ich habe den Code entfernt, als ich der Beschreibung usw. einen Wert zugewiesen habe, aber das spielt in diesem Fall keine Rolle. Irgendwelche Vorschläge?

Answer 1

Sie Klammern in HTML verpasst haben, sollte es wie folgt sein:

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

Answer 2

Es ist nicht die Klammer aber das Fehlen einer angemessenen Tagging.

soll es

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

Vue Eigenschaften alle mit v- beginnen werden, außer in Fällen des Kurzschrift in diesem Fall die @click="UpdateProduct"

Answer 3

Recht könnte ich es geschaffen haben, damit es funktioniert. Ich habe der Komponente selbst Methodenoptionen hinzugefügt, und von dort aus kann ich die Methode der App aufrufen.

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


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