Making a conditional tag

Sometimes you want people to see something, sometimes you don't.

In vue.js you can do conditional rendering with the v-if attribute.

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

I have gone a different route for the time being, by creating a whole element that wraps other elements that maybe people shouldn't see:

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

This has the benefit of being able to use the code for connecting the element to the model. (See the first post for how that works.)

The main change comes in the updateElement function:

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];
  }
};

Where I've added a check to see if the element is the conditional element, and, if it is, then a function is called to hide the element.

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

I'm not sure if this is the best way to handle conditions, also I'll have to figure out if I'll allow the model to be a function as well and how to deal with that.

Conclusion

I have created an element that allows me to use the model to determine if things get shown. I don't know if I need to make an else element. Probably not, but I'll think more about it.

Next time we'll look into expanding from just handling clicks to handling any event.

Please let me know any thoughts or questions you have in the comments below.

❤️, share, and follow for the next instalment!