v-el behaviour

[jbrialon]

Hello,

right now when we use v-el we are able to register a reference to a DOM element on its owner Vue instance’s $els object for easier access.

it could be great if it could retrieve an array of object by using v-els for example

<span v-els:msg>hello</span>
<span v-els:msg>world</span>

this.$els.msg // -> array(<span>hello</span>,<span>world</span>);

[lbineau]

@jbrialon would be a great feature ! 👍

[blake-newman]

👍

[yyx990803]

I don't quite get why this is useful. Any convincing use case?

[jbrialon]

In my case I was animating different elements using Tweenmax and using v-el was pretty convenient then I had to use the stagger function from Tweenmax and I thought it would have been great if we could retrieve an array

that's one example of course but there would be other applications for the functionality

[cgarnier]

Yes could be great for massive animation stuff.

[AnyGong]

@jbrialon Vue.js the v-els equivalent to document.getElementById (), which is similar to your needs, is not used document.querySelectorAll ('.msg') // -> Array (<span> hello </ span>, <span> world </ span>);，
I have this idea possible? You can not achieve this requirement?

[jbrialon]

@AnyGong of course but why implementing v-el if you could use document.getElementById in the first place then

[young-steveo]

It seems useful. Might I suggest this syntax:

Instead of v-els use a modifier for the standard v-el. A .list modifier would tell the directive to put the elements in an array:

<span v-el:message>hello</span> <!-- this.$els.message -->
<span v-el:messages.list>world 1</span> <!-- this.$els.messages[0] -->
<span v-el:messages.list>world 2</span><!-- this.$els.messages[1] -->

[jbrialon]

v-els was a suggestion but .list is a good idea too ! 👍

[blake-newman]

I like the modifier as my preference but either will suffice.

[Gerhut]

I have a requirement that make the window scroll to the nth row of a table rendered by v-for.

If array of v-el is supported I can wrote:

<table>
<tbody>
  <tr v-for="" v-el:row></tr>
</tbody>
</table>

exports.methods.scrollToRow = function (index) {
  this.$els.row[index].scrollIntoView()
}

But now I must make tr a component and use v-ref and get its $el

[yyx990803]

I'm not convinced by the benefits of this suggestion - it introduces extra syntax on Vue's part (increases both implementation complexity and learning cost) while the same can simply be achieved with this.$el.querySelectorAll.