CODEWITHSUNDEEP
vue.jsvuejs2
Bas
Bas

Reputation: 2400

VueJs display html inside for loop without element

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>"
]

Upvotes: 0

Views: 1529

Answers (1)

Mohsin Amjad
Mohsin Amjad

Reputation: 1209

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.

Upvotes: 2

Related Questions