Vue.jsコンポーネントclickイベントが見つかりません

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> 

しかし、私はイベントを起こそうとしている/コンポーネントからの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}}はうまくいきます。私は説明などに価値を割り当てるときにコードを削除しましたが、この場合は問題ありません。助言がありますか？あなたがHTMLに括弧を見逃している

Answer 1

、それは次のようにする必要があります：

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

Answer 2

それは括弧が、適切なタグ付けの欠如ではありません。

それは

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

Vueのプロパティのすべてが、この場合、私はそれを動作させるために管理している@click="UpdateProduct"

Answer 3

右可能性が速記の場合を除いてV-で始めなければなりません。 メソッドのオプションをコンポーネント自体に追加しました。そこからアプリケーションのメソッドを呼び出すことができます。

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


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