0

In a specific part of my application I need to get the HTML code generated by Vue and send it to my API.

The problem is: Vue adds a data-* attribute to all HTML elements. How can I remove this attribute in all exported HTML?

console.log(this.$refs.template.$el.outerHTML)

returns:

<table data-v-2cacc920="" class="body" style="background-color: rgb(255, 255, 255); color: rgb(25, 25, 25); font-size: 14px;"><tbody><tr><td align="center" valign="top" class="float-center"><center><table align="center" class="container"><tbody><tr><td><div data-v-2cacc920="" class="columns-drop-area" style="background-color: rgb(255, 255, 255); padding: 0px;"><table data-v-2cacc920="" class="row"><tbody><tr><th data-v-2cacc920="" class="columns large-6 small-12 first"><table><tbody><tr><th><div data-v-2cacc920="" class="components-drop-area" style=""><div data-v-2cacc920="" class="item" style="border-radius: 0px; padding: 0px; font-size: 14px;"><p data-v-2cacc920="">Lorem ipsum dolor sit amet.</p></div></div></th></tr></tbody></table></th><th data-v-2cacc920="" class="columns large-6 small-12 last"><table><tbody><tr><th><div data-v-2cacc920="" class="components-drop-area"></div></th></tr></tbody></table></th></tr></tbody></table></div></td></tr></tbody></table></center></td></tr></tbody></table>

How to remove data-v-2cacc920="" from all the HTML?

Remembering that this attribute is dynamic and it changes all the time...

I think one possibility for this is to use regex, inside a loop with all elements, but I do not understand anything about regex =/

Something like that:

this.$refs.template.$el.querySelectorAll('*')

Caio Kawasaki
  • 2,894
  • 6
  • 33
  • 69

1 Answers1

0

You can get the list of all attributes by accessing this.$refs.template.$el.attributes ( which returns a NamedNodeMap)

If you know that these data attributes start with a certain prefix then you can do the following

const prefix = 'data-v';
for (const attribute of [...this.$refs.template.$el.attributes]) {
   if (attribute.name.startsWith(prefix)) {
     this.$refs.template.$el.removeAttribute(attribute.name);
   }
}
ehab
  • 7,162
  • 1
  • 25
  • 30
  • This will not remove only in the first element `table`? – Caio Kawasaki Jun 24 '19 at 19:52
  • @CaioKawasaki this is the way to remove certain data attributes from one element, if you want to remove these attributes from more than one element you have to get references to these elements somehow – ehab Jun 24 '19 at 19:53