What would you consider best practice in this situation:
<div>
<div v-if="condition-1">Show something</div>
<div v-if="condition-2">Show something else</div>
<div v-if="condition-2">Show some other thing</div>
</div>
or
<div>
<div v-if="condition-1">Show something</div>
<div v-if="condition-2">
<div>Show something else</div>
<div>Show some other thing</div>
</div>
</div>
I guess it boils down to how you value the html elements and for me, the first option is how I would prefer to write it as I find the extra div not serving a structural purpose in the second option. How would you argue for or against the two?
[Edit] As shown by the answer below, using a template element to hold the condition is the way to go
For me it's definitely CODE 2. It's clearer and better structured, plus you avoid duplicates (here: "condition-2"). Also, at least from my point of view, it is easier for an external user to find his way around the second code.
In addition, I believe that you should also use the nested structure otherwise this would be quite pointless
Code 1 is, for me personally, not an option at all.
You can also use v-else in both codes. I think it's a little bit smarter than two times v-if like this:
<div>
<div v-if="condition-1">Show something</div>
<div v-else>
<div>Show something else</div>
<div>Show some other thing</div>
</div>
</div>
You could use v-else with virtual element template which doesn't break your html elements structure :
<div>
<div v-if="condition-1">Show something</div>
<template v-else>
<div>Show something else</div>
<div>Show some other thing</div>
</template>
</div>
In this case, I would probably use template as a wrapper for the 2 items. It makes more sense in case the 3 items are supposed to be on the same level.
https://vuejs.org/v2/guide/conditional.html#Conditional-Groups-with-v-if-on-lt-template-gt
<div>
<div v-if="condition-1">Show something</div>
<template v-if="condition-2"> <!-- Or v-else -->
<div>Show something else</div>
<div>Show some other thing</div>
</template>
</div>
Definitely the second way. And as a container you should then use the template tag. whether you should then use if or else derektive depends on whether both conditions can occur simultaneously (if) or exclude each other (else).
<div>
<div v-if="condition-1">Show something</div>
<div v-if="condition-2"> <!-- both condition can be show something-->
<div>Show something else</div>
<div>Show some other thing</div>
</div>
</div>
// or
<div>
<div v-if="condition-1">Show something</div>
<div v-else> <!-- only one condition can be true -->
<div>Show something else</div>
<div>Show some other thing</div>
</div>
</div>
Using this method you can avoid repetition of codes.
<div>
<div v-if="condition-1">Show something</div>
<template v-if="condition-2">
<div>Show something else</div>
<div>Show some other thing</div>
</template>
</div>