v-for의 변수를 클릭 할 때의 값으로 삽입

Question

내 응용 프로그램에서 VueJS & PHP를 혼합하여 사용하고 있습니다. 이전에 AngularJS를 사용했을 때 나는 이렇게 할 수있었습니다.

본질적으로 내가하려는 것은 클릭 할 때 내 앵커 호출 자바 스크립트 메서드를 만드는 것입니다. 이제 문제는 메소드가 외부에 저장 될 것이므로 내 Vue 앱 내부의 메소드를 호출하는 것을 원하지 않는다는 것입니다. 어쨌든이 있다면 그래서 제 질문은 단순히 대신 뷰는 뷰 구성 요소에 대해 생성 된 HTML을 완벽하게 제어 할 수 있도록

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

Answer 1

처럼 그 일의

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

처럼 뭔가를 할 수있다, 많은 경우 템플릿의 일부가 Vue에 의해 재생성됩니다 (v-if, v-for 등의 응답으로) "클래식"onclick 함수 핸들러를 사용할 수 없기 때문에 v-on을 사용해야합니다 컴퍼넌트 내에서 정의 된 모든 메소드 그런 다음 그 메소드 내에서 원하는 전역 함수를 호출 할 수 있습니다.

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>