Hiding Buttons and Labels in Widgets

Liberty Create - Build Advice
1

Hi,

I’m trying to hide some labels and buttons in the main.htm dependent on the results from the get_template_data.

I tried returning hidden from the loader then adding it into the class as {{hidden}} but this just makes the class as {{hidden}} not the actual word hidden

I also was looking at the OS API but this requires having a call made is there a way you can get frontend on load or that you can fit the variable into the class?

Thanks
Robin

2

Assuming you are using a Vue-based widget, and are returning a boolean variable called “hidden” from get_template_data() for example, there are a couple of options:

You could use the v-if syntax to not render the elements based on that variable, e.g.:
<span v-if="!hidden">...</span>

More about that here: Conditional Rendering — Vue.js

…or use dynamic class names to apply CSS to hide the elements (assuming here that you have a CSS class called “hideme”):
<span v-bind:class="{ hideme: hidden}">...</span>

More on that here: Class and Style Bindings — Vue.js

If you were trying to use the mustache {{}} syntax inside a HTML param directly, e.g:
<span class="{{hidden}}">...</span>
…this will not work and you will need to use the bind format as above.

You can find out more about that issue here: Template Syntax — Vue.js

3

Thanks bob very useful links