Two div elements with same v-if or one wrapper?

user_1406159 0
Viewed 94

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

vue.js html
5 Answers

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>
user_81728570
user_37419000

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>
user_163656850

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>
user_148071110

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>
user_175879030
Related