评论VUE模板元素的一部分

Question

有时需要评论某些元素属性而不必记住它以在某些测试后快速恢复它。

用html评论语法可以实现整个元素的评论

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

但是，这与单个属性无法使用（导致渲染错误）

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

我以前可以看到和使用的最佳方法是通过复制整个元素和设置v-if="false"（或评论整个复制元素）进行标记备份，并继续尝试原始One

Answer 1

我认为您不能在组件标签中放置HTML评论，这与您无法在HTML元素打开标签中放置注释的原因相同。在任何一种情况下，这都不是有效的标记。我认为您最接近的是在报价中发表评论：

:disabled="// !isValid"

具有与：

相同的效果

:disabled=""

取决于您的组件是否可以处理丢失的值，可能适合您的需求。

Answer 2

将属性值与 data-或用 data属性包装。

<my-comp id="my_comp_1"
         v-model="value"
         data-:disabled="!isValid"
         data-_click="handleClick">  # `@` could not be used
</my-comp>

或

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

我将将属性设置为 data-FIXME。

Answer 3

我得到了这些解决方案。我想到解决方案1。

开始代码：

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

需要禁用的VUE指令HTML属性：@click="foo.on = !foo.on"

最终DIV标签将如何运行：

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

解决方案1和2将残障属性保持在其标签中。我找不到制作"原始字符串"的好方法。要将属性保持在标签中，外部和内部引号必须不同。

sol。1：我制作了一个新的v-bind属性（:lang）将残疾人属性放入。

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

sol。2：选择VUE指令。将属性放入。

中

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

解决方案3和4将属性放在标签外。

sol。3：

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

sol。4：<!-- @click="foo.on = !foo.on" -->

Answer 4

删除/隐藏组件属性的一种方法是为其创建自定义指令。

假设您创建了一个称为v-hide的指令，并将其放入组件中：

<my-comp  v-model="value" @click="handleClick" v-hide :disable='true'></my-comp> 

，输出将是：

<my-comp  v-model="value" @click="handleClick"></my-comp> 

这是一个有效的示例：

Vue.component ('my-component', {
  template: `<p> A custom template </p>`
})
Vue.directive('hide', {
  inserted: function (el) {
   console.log('el before hide', el)
    while(el.attributes.length > 0)
    el.removeAttribute(el.attributes[0].name);
    console.log('el after hide', el)
  }
})
new Vue({
  el: '#app',
  data () {
    return {
      someValue: 'Hello'
    }
  }
})

<script src="https://unpkg.com/vue@2.5.3/dist/vue.js"></script>
<div id="app">
  <my-component v-model='someValue' v-hide :disable='true'></my-component>
</div>