0

Created by
kidscript 51 about 3 days 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