v-forからclickへの値に変数を挿入する

Question

私は現在、アプリケーションでVueJS & PHPの混合物を使用しています。以前はAngularJSを使用していましたが、このようにできました。

私がしようとしているのは、アンカーをクリックしてJavaScriptメソッドを呼び出すことです。問題は、メソッドが外部に保存されるため、Vueアプリ内のメソッドを呼び出さないようにすることです。だから私の質問は、とにかくだ場合、私は単純に

onclick="function('value', '{{ for.id }}')

の代わりに、Vueのは、Vueのコンポーネントに対して生成されたHTMLを完全に制御を持っているので、

v-on:click(somefunction($for.id)

Answer 1

ようにそれをやってのような何かを行うことができますされ、多くの状況で、テンプレートの一部がVueによって再生されます（v-if、v-forなどのようなものへの応答）ので、実際には "古典的な" onclick関数ハンドラを使用することはできません。v-on〜cすべてのメソッドは、コンポーネント内で定義されています。そのメソッドの中から、必要なグローバル関数を呼び出すことができます。

function external(item) { 
 
    alert('You clicked ' + item); 
 
} 
 

 
new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    items: ['apple', 'banana', 'orange'], 
 
    }, 
 
    methods: { 
 
    internal(item) { 
 
     // Delegate to external function 
 
     external(item); 
 
    }, 
 
    }, 
 
});

<script src="https://rawgit.com/vuejs/vue/dev/dist/vue.js"></script> 
 

 
<div id="app"> 
 
    <button v-for="item of items" @click="internal(item)">{{ item }}</button> 
 
</div>