Vue 템플릿 요소의 일부를 코멘트 아웃합니다.

Vue 템플릿 요소의 일부를 코멘트 아웃합니다.

일부 테스트 후 신속하게 복원하기 위해 일부 요소 속성을 기억할 필요 없이 주석을 달아야 할 수 있습니다.

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"그것을 위해(또는 복사된 요소 전체를 코멘트 아웃), 원래의 것으로 실험을 계속한다.

HTML 요소 열기 태그에 HTML 코멘트를 넣을 수 없는 것과 같은 이유로 HTML 코멘트를 넣을 수 없다고 생각합니다.어느 경우든 유효한 가격인상은 아닙니다.가능한 한 코멘트를 인용문에 넣는 것이 좋다고 생각합니다.

:disabled="// !isValid"

이는 다음과 같은 효과를 가져옵니다.

:disabled=""

컴포넌트가 누락된 값을 처리할 수 있는지 여부에 따라 필요에 따라 달라집니다.

이 방법들이 효과가 있어요.나는 해결책 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는 비활성화된 속성을 태그 안에 유지합니다.나는 '생줄'을 만드는 좋은 방법을 찾지 못했다.태그에서 속성을 유지하려면 외부 따옴표와 내부 따옴표가 달라야 합니다.

솔루션 1: 새로운 v-bind 속성을 만들었습니다.:lang디세이블 Atribute를 입력합니다.

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

Sol.2: Vue 지시문을 선택합니다.속성을 입력합니다.

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

솔루션 3과 4는 속성을 태그 외부에 배치합니다.

솔루션 3:

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

솔루션 4:<!-- @click="foo.on = !foo.on" -->

컴포넌트 속성을 삭제/숨기는 한 가지 방법은 해당 컴포넌트의 커스텀 디렉티브를 작성하는 것입니다.

예를 들어 다음과 같은 명령을 생성했다고 가정해 보겠습니다.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>

언급URL : https://stackoverflow.com/questions/47901814/comment-out-a-part-of-vue-template-element