Vue.js - 在v-for内部使用v-el不起作用

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

两件事情：

1. 定义v-el正确方法按照最新的版本是v-el:span。检查此链接https://vuejs.org/api/#v-el
2. 您this内ready方法点到顶级div所以如果你把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') 
    ... 
    } 
}