DEV Community

Cover image for Making a conditional tag
Matt Ellen-Tsivintzeli
Matt Ellen-Tsivintzeli

Posted on

1

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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];
  }
};
Enter fullscreen mode Exit fullscreen mode

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;';
  }
};
Enter fullscreen mode Exit fullscreen mode

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!

SurveyJS custom survey software

Build Your Own Forms without Manual Coding

SurveyJS UI libraries let you build a JSON-based form management system that integrates with any backend, giving you full control over your data with no user limits. Includes support for custom question types, skip logic, an integrated CSS editor, PDF export, real-time analytics, and more.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs