random "data-v-*" attribute in Vue.js components

vue.js vuejs2 vue-component
B M picture B M · Mar 9, 2017 · Viewed 12.5k times · Source

Experimenting with Vue.js the first thing I noticed is how every instance of a component that I define as single file component and include as custom element gets a random hash attribute like data-v-58fd7087="". Specifically:

  • Every DOM element of every instance of a given component gets the same hash
  • The hash is generated independently of the router
  • The hash is stable between calls
  • The hash is stable between name changes of the component
  • The hash is not stored / generated on the disk
  • Thus the hash is generated dynamically

Could it be generated by Karma or Webpack that are part of my Vue setup? If not, these are some surprising observations to me. It leads to two questions:

  • When and how is this hash (attribute) generated?
  • Why is the hash (attribute) generated?

Answer

cdignam picture cdignam · Mar 9, 2017

Something similar occurs when using scoped CSS with Vue Loader.

I use scoped css and I have attributes like data-v-4646bc3c, so I figure that is it.

If you don't want this feature, try removing the scoped attribute from your single file components.

<style scoped>
/* local styles */
</style>

Related questions

How to listen for 'props' changes

In the VueJs 2.0 docs I can't find any hooks that would listen on props changes. Does VueJs have such hooks like onPropsUpdated() or similar? Update As @wostex suggested, I tried to watch my property but nothing changed. Then I realized …

Read More
How to add external JS scripts to VueJS Components

I've to use two external scripts for the payment gateways. Right now both are put in the index.html file. However, I don't want to load these files at the beginning itself. The payment gateway is needed only in when …

Read More
[Vue warn]: Property or method is not defined on the instance but referenced during render

var MainTable = Vue.extend({ template: "<ul>" + "<li v-for='(set,index) in settings'>" + "{{index}}) " + "{{set.title}}" + "<button @click='changeSetting(index)'> Info </button>" + "</li>" + "</ul>", data: function() { return …

Read More