Elfayer Elfayer - 1 year ago 182
HTML Question

How to avoid VueJS to remove the props attributes in the DOM?

I have a

on a component that is correctly passed to the component. The value is correctly set inside the component. But the attribute is removed at the compilation time of VueJS. (I guess)

How can I avoid the attribute to be removed ? At runtime I need to be able to get every element with same attribute like:
$("[group-name=' + vm.groupName + ']");

Here is a DEMO


<script type="x-template" id="my-component-tpl">
<div>My Component's group name is <b>{{groupName}}</b>.</div>
<div>But the attribute 'group-name' is no longer in the DOM...</div>

<div id="app">
<my-component group-name="Demo"></my-component>


var myComponent = {
template: '#my-component-tpl',
props: ['groupName']

new Vue({
el: '#app',
components: {
'my-component': myComponent

Answer Source

Besides the fact that I personally think you should rather use a class that some non-standard attribute - you will have to addd it to the root element again in the template.

<script type="x-template" id="my-component-tpl">
  <div v-bind:group-name="groupName">
    My Component's group name is <b>{{groupName}}, and the outer div also has the correspondign attribute now.</b>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download