조건부 태그 만들기

사람들이 무언가를 보길 원할 때도 있고 그렇지 않을 때도 있습니다.

vue.js에서는 v-if 속성으로 조건부 렌더링을 할 수 있습니다.

<h1 v-if="awesome">Vue is awesome!</h1>

사람들이 보지 말아야 할 다른 요소를 감싸는 전체 요소를 생성하여 당분간은 다른 경로를 택했습니다.

<rjsf-if data-model="hidethis">
  <p>should I be seen?</p>
</rjsf-if>

이는 요소를 모델에 연결하는 코드를 사용할 수 있다는 이점이 있습니다. (작동 방식은 를 참조하십시오.)

주요 변경 사항은 updateElement 함수에 있습니다.

AppBuilder.prototype.updateElement = function(el)
{
  const property = el.dataset.model;
  if(el.tagName === 'RJSF-IF')
  {
    this.rjsfif(el, property)
  }
  else
  {
    el.textContent = this.data[property];
  }
};

여기서 요소가 조건부 요소인지 확인하는 검사를 추가했으며 조건부 요소인 경우 요소를 숨기기 위해 함수가 호출됩니다.

AppBuilder.prototype.rjsfif = function(el, prop)
{
  if(!this.data[prop])
  {
    el.style='display:none;';
  }
  else
  {
    el.style='display:inherit;';
  }
};

이것이 조건을 처리하는 가장 좋은 방법인지 확실하지 않습니다. 또한 모델이 함수가 되도록 허용할지 여부와 이를 처리하는 방법을 알아내야 합니다.

결론

모델을 사용하여 항목이 표시되는지 확인할 수 있는 요소를 만들었습니다. else 요소를 만들어야 하는지 모르겠습니다. 아닐 수도 있지만 좀 더 생각해보겠습니다.

다음 시간에는 클릭 처리에서 모든 이벤트 처리로 확장하는 방법을 살펴보겠습니다.

아래 의견에 의견이나 질문이 있으면 알려주십시오.

❤️, 공유하고 다음 편을 팔로우하세요!