0

Created by
kidscript 45 about 2 months ago

For vue.js what is the best way to have a conditional outer html element?

In vue.js I have a <div id="stuff">...</div> with certain elements. I now have 3 cases. In case a) this div should be surrounded by <a>. In case b) this div should be surrounded by <nuxt-link> and in case c) it should not be surrounded at all.

What I can do now is have a vue-if to list these 3 cases:

<a vue-if="case1">
  <div id="stuff">...</div>
</a>
<nuxt-link vue-else-if="case2">
  <div id="stuff">...</div>
</nuxt-link>
<div vue-else id="stuff">...</div>

So here I'm repeating the <div id="stuff">...</div> for each of the cases. Is this the best way to do this? It seems a bit bloated since I'm repeating the whole <div id="stuff">...</div> for each of the cases. Can I not just somehow only make the parent of <div id="stuff">...</div> conditional and write the div itself once?

What's the best way to do this?

See task infos

Solutions (3)

0

jimmyhopkins001 122 about 4 days ago
Awaiting decision

0

dennis 110 about 1 month ago
Declined solution
kidscript 45 about 1 month ago
Creator

From your answer it seems you didn't really understand the question

0

0

deeperthanweb 24 about 1 month ago
Declined solution
kidscript 45 about 1 month ago
Creator

answer doesn't make any sense

0