Making a conditional tag – DEV Neighborhood 👩‍💻👨‍💻

Typically you need individuals to see one thing, generally you do not.

In vue.js you are able to do conditional rendering with the v-if attribute.

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

I’ve gone a distinct route in the meanwhile, by creating an entire component that wraps different parts that possibly individuals should not see:

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

This has the good thing about having the ability to use the code for connecting the component to the mannequin. (See the first submit for the way that works.)

The primary change comes within the updateElement perform:

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

The place I’ve added a examine to see if the component is the conditional component, and, whether it is, then a perform is known as to cover the component.

AppBuilder.prototype.rjsfif = perform(el, prop)
{
  if(!this.knowledge[prop])
  {
    el.model='show:none;';
  }
  else
  {
    el.model='show:inherit;';
  }
};

I am undecided if that is one of the simplest ways to deal with circumstances, additionally I am going to have to determine if I am going to enable the mannequin to be a perform as properly and how one can cope with that.

Conclusion

I’ve created a component that permits me to make use of the mannequin to find out if issues get proven. I do not know if I have to make an else component. Most likely not, however I am going to suppose extra about it.

Subsequent time we’ll look into increasing from simply dealing with clicks to dealing with any occasion.

Please let me know any ideas or questions you might have within the feedback under.

❤️, share, and comply with for the subsequent instalment!