OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Conditionally wrap a vue 3 element

  • Thread starter Thread starter dbzx10299
  • Start date Start date
D

dbzx10299

Guest
In Vue 3, how can an element be conditionally wrapped rather than creating two seperate blocks with v-if directive?

I have a simplified example here, but the question deals with conditional wrapping. There are a few issues here, in the html block there is a lot of coupling with state in the script setup block, so abstracting that to a child component is more trouble than it's worth. There would be mixed state and it would be a mess having to deal with emitting data from child to parent. Second, because of the size of the html block, creating manual render functions would also be a mess.

The below code does work, but there is a big block that is duplicated just because I need an extra wrapper. Note that this question is not about how css could be used to fix this.

Code:
<script setup>
const isMobile = ref(true)
</script>

<template>
  <div v-if="isMobile" class="mobile-wrapper">
    <div class="product-meta">
      <!-- long html block tightly coupled with script setup block -->
    </div>
  </div>
  <div v-else class="product-meta">
    <!-- same html block -->
  </div>
</template>

<p>In Vue 3, how can an element be conditionally wrapped rather than creating two seperate blocks with <code>v-if</code> directive?</p>
<p>I have a simplified example here, but the question deals with conditional wrapping. There are a few issues here, in the html block there is a lot of coupling with state in the script setup block, so abstracting that to a child component is more trouble than it's worth. There would be mixed state and it would be a mess having to deal with emitting data from child to parent. Second, because of the size of the html block, creating manual render functions would also be a mess.</p>
<p>The below code does work, but there is a big block that is duplicated just because I need an extra wrapper. Note that this question is not about how css could be used to fix this.</p>
<pre class="lang-js prettyprint-override"><code><script setup>
const isMobile = ref(true)
</script>

<template>
<div v-if="isMobile" class="mobile-wrapper">
<div class="product-meta">
<!-- long html block tightly coupled with script setup block -->
</div>
</div>
<div v-else class="product-meta">
<!-- same html block -->
</div>
</template>
</code></pre>
 

Latest posts

A
Replies
0
Views
1
Ashrik Ahamed
A
A
Replies
0
Views
1
Ashrik Ahamed
A

Online statistics

Members online
1
Guests online
3
Total visitors
4
Top