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

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')
    ...
  }
}

Answer 2

两件事：

1. 根据最新版本定义v-el的正确方法是v-el:span。点击此链接https://vuejs.org/api/#v-el
2. 您的this内部ready方法指向顶级div，因此如果您将v-el置于顶层并尝试打印就绪功能，则会打印。

检查这个jsfiddle

https://jsfiddle.net/oyomyosw/