v-if and v-text combined

[lyneal]

When developing, we often have to check whether an element exists before displaying it.

Example :

<p v-if="myValue">{{ myValue }}</p>
<p v-if="myValue" v-text="myValue"></p>

It might be interesting to create a directive that combines the v-if and v-text directives.

Solution :

<p v-if-text="myValue"></p>  
<p v-if-add="myValue"></p>

Regarding the name of this directive, I have no firm idea.

[marcosgomesneto]

It is understandable to intend to simplify the code and make it more concise, but the suggestion to create a directive like v-if-text or v-if-add may not be a good idea

When creating a custom directive to combine two specific functionalities (v-if and v-text), you might be sacrificing the principle of decoupling. Vue is designed with the idea of independent and reusable components. Merging specific functionalities may compromise the ability to reuse these directives in different contexts.

[lyneal]

I thank you for your feedback, my proposal is clearly not essential and I understand/join your argument. Perhaps a good idea in a third-party library, but not within Vue.js itself.