Comment out a part of Vue template element

Question

Sometimes it is needed to comment out some element attribute without having to remember it in order to restore it quickly after some tests.

Commenting out whole element is achievable with HTML commenting syntax

<div>
    <!-- <h2>Hello</h2> -->
    <span>hi</span>
</div>

However this won't work with a single attribute (causes rendering error)

<my-comp id="my_comp_1"
         v-model="value"
         <!-- :disabled="!isValid" -->
         @click="handleClick">
</my-comp>

The best approach I could see and used before was to make a tag backup by copying whole element and settings v-if="false" for it (or comment out whole copied element) and continue to experiment with original one

Answer 1

I got these solutions to work. I thought of solution 1.

Starting code:

<div 
v-for="foo in foos" 
:key="foo.id" 
@click="foo.on = !foo.on /* JavaScript comment. */"
>
  <label>
    {{ foo.name }} {{foo.on}}
  </label>
</div>

The Vue directive HTML attribute that needs to be disabled: @click="foo.on = !foo.on"

How the final div tag will run:

<div 
v-for="foo in foos" 
:key="foo.id" 
>

Solutions 1 and 2 keep the disabled attribute inside its tag. I didn't find a good way to make a "raw string". To keep the attribute in the tag, the outer and inner quotes must be different.

sol. 1: I made a new v-bind attribute (:lang) to put the disabled attribute in.

:lang='en  /* @click="foo.on = !foo.on" */'

Sol. 2: Pick a Vue directive. Put the attribute in.

v-for="foo in foos /* @click='foo.on = !foo.on' */"

Solutions 3 and 4 put the attribute outside the tag.

Sol. 3:

<div v-if="false">
  @click="foo.on = !foo.on"
</div>

Sol. 4: <!-- @click="foo.on = !foo.on" -->

Answer 2

I don't think you can put an HTML comment inside a component tag, for much the same reason you can't put comments inside an HTML element opening tag. It's not valid markup in either situation. I think the closest you could come would be to place the comment in the quotes:

:disabled="// !isValid"

Which would have the same effect as:

:disabled=""

Depending on whether your component can handle that value being missing, that might fit your needs.