why not all html elements on vuejs component have data-v-??????? attribute?

Question

i use framework7-vue + vuejs. Components, like chip, have simple syntax:

<f7-chip text="Example Chip"></f7-chip>

and generate simple html:

<div data-v-aa85b83a="" class="chip">
    <div class="chip-label">Example Chip</div>
</div>

element .chip has data-v attribute, why .chip-label doesnt? I need set style over chip-label, i know about /deep/ styling, but its shame. can i set data-v attribute to childrent elements dynamical components?

Please explain why you assume chip-label should have data-v attributes? Also why do you need that attribute in particular? Are you trying to do querySelector or similar against those elements? — Alexander Staroselsky
– Alexander Staroselsky, Commented Apr 20, 2019 at 0:00
sorry ) i need use scoped style for children elements, but they have not data-v attribute. — Трин Зотофф
– Трин Зотофф, Commented Apr 20, 2019 at 0:02
It’s fine. Please add the scoped CSS you are tying to add to those elements and the issues you are experiencing please as well as what you are trying to achieve. — Alexander Staroselsky
– Alexander Staroselsky, Commented Apr 20, 2019 at 0:05
i have scss: .chip{ margin:0 5px 10px 0; /deep/ .chip-label{ margin-top:-2px; } } i need scss: .chip{ margin:0 5px 10px 0; .chip-label{ margin-top:-2px; } } — Трин Зотофф
– Трин Зотофф, Commented Apr 20, 2019 at 0:35

Matt Oestreich · Accepted Answer · 2019-04-20 00:05:28Z

2

This is because you are either using <style> tags in your component (scoped styles) or you are viewing elements while running hot reload. This is more likely because of scoped styles, though.

answered Apr 20, 2019 at 0:05

Matt Oestreich

8,6163 gold badges19 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Трин Зотофф Over a year ago

yes, i need scoped style, i know about /deep/ styles, but why dynamical components not set data-v attribute to children elements?

Matt Oestreich Over a year ago

Because they don't need them. Those data-v-* attributes are only used to set styling. Thats how scoped styles work - without them the scoped styling's wouldn't work.

Matt Oestreich Over a year ago

Nope. Not unless you want to give them style.

George. Over a year ago

ah, i was wondering why my nested html tags did not contain data-v-xxx attribute. Thank you @MattOestreich

Collectives™ on Stack Overflow

why not all html elements on vuejs component have data-v-??????? attribute?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related