VueJs display html inside for loop without element

Question

I my pages component i loop through. The problem is that the loop ommits for example <div class="wp-block-columns"> with <div><div class="wp-block-columns"></div>

Is there a way that i can loop and do this <div v-if="item.substring(0,10) !== 'component-'" v-html="item"></div> without outputting the div around the other?

How can achieve that?

Pages component:

    <template v-for="item in json.content">
        <component v-if="item.substring(0,10) === 'component-'" :is="item"></component>
        <div v-if="item.substring(0,10) !== 'component-'" v-html="item"></div>
    </template>

Data php array which will be converted to json:

array:13 [▼
    1 => "<div class="wp-block-columns">"
    2 => "<div class="wp-block-column col-md-6" style="flex-basis:33.38%">"
    3 => "<p>111</p>"
    4 => "</div>"
    8 => "<div class="wp-block-column col-md-6" style="flex-basis:33.63%">"
    9 => "<p>222</p>"
    10 => "</div>"
    14 => "<div class="wp-block-column col-md-6" style="flex-basis:33%">"
    15 => "<p>333</p>"
    16 => "</div>"
    17 => "</div>"
    20 => "component-adreswidget"
    23 => "<p>test</p>"
]

tony19 · Accepted Answer · 2022-07-15 04:19:16Z

2

It's not possible to use v-html without wrapping in some tag as you can see in offical docs https://v2.vuejs.org/v2/guide/syntax.html#Raw-HTML.

what you can do is rearrange your array in such a way that it gives you whole chunk rather than seperate tags like

array:13 [▼
    1 => `<div class="wp-block-columns">
          <div class="wp-block-column col-md-6" style="flex-basis:33.38%">
          <p>111</p> </div>
         </div>`
    2 => "component-adreswidget"
    3 => "<p>test</p>"
]

and wrapping it in span or div.

edited Jul 15, 2022 at 4:19

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Aug 8, 2019 at 13:57

Mohsin Amjad

1,21910 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

VueJs display html inside for loop without element

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related