Vue.js - V- 내부에서 V- 내부 작업 사용

Question

클릭 이벤트에서 v-for 루프 내부의 특정 div에 애니메이션을 적용하려고합니다. 그 일을하기 위해서는 dom/jquery 요소가 필요합니다. 물론 모든 요소를 ​​한 번에 애니메이션으로 만들고 싶지는 않습니다.이 특정 요소를 클릭하면됩니다.

저는 이것을 사용하기 위해 v-el을 사용하고 싶었지만 작동하지 않았습니다. $ els 객체는 아무 것도 반환하지 않습니다. 이것은 내가 뭘하려 :

<li v-for="element in elements" v-el="li"> 

    <span v-el="span">lorem</span> 
    <span v-el="span2"> ipsium {{element.content}}</span> 

</li> 

https://jsfiddle.net/w1cd96ux/

Answer 1

두 가지 : 같은 최신 당 버전이 v-el:span입니다 v-el을 정의하는

1. 올바른 방법입니다. 당신이 최고 수준에 v-el을 넣어 준비 기능에 인쇄하려고 그렇다면 최고 수준의 div이 링크
2. 당신의 thisready 내부 방법 포인트 https://vuejs.org/api/#v-el을 확인,이 인쇄됩니다.

확인이 jsfiddle

https://jsfiddle.net/oyomyosw/ 

Answer 2

v-el은에 일을하거나 v-for 내에서하지 않습니다. 각 <li>이 구성 요소 인 경우 v-ref을 사용할 수 있지만 span에서 v-el까지 액세스 할 수 있습니다 (다음 Vue 버전에서는 사용되지 않음). 내가 제대로 이해 해요 경우

나는 아마이 방법을 것 :

<li v-for="item in items" @click="animate"> 
    <span>...</span> 
    <span>...</span> 
</li> 

그런 다음 당신의 방법에 당신이 할 수 있습니다

methods: { 
    animate(event) { 
    const li = event.currentTarget 
    const spans = li.querySelectorAll('span') 
    ... 
    } 
}