v-for removes margins in bulma

Question

for example I have a simple figure in bulma like this

<figure>
<img src="https://bulma.io/images/placeholders/128x128.png">
<img src="https://bulma.io/images/placeholders/128x128.png">
<figcaption>
Some Caption
</figcaption>
</figure>

You see some space between which is great.

Now when I want to display the images by using vue and displaying it with a v-for, then those margins disappear...

does anyone know why? I recognized that the css selector like nth child does not work anymore when I apply vue and v-for... but I dont know how to solve that...

update: the same thing happens to the h1 tag!

Here is a fiddle explaining it also very good: https://jsfiddle.net/fbp1yhyu/2/

Answer 1

It is because your original example has a white space (new line and tabs) character between the two images, however Vue is not placing a white space character between the imgs in the v-for.

Original markup:

<img ...> <img ...>

Resulting VueJS markup using which uses <img v-for="..." src="...">:

<img ...><img ...>

THe following code adds the space back in, however it is a slightly larger space. The   is a white space character. Hope this helps!

<template v-for="image in garden.images">
      <img :src="image">&nbsp;
</template>

And you can reproduce the same issue in the original markup without vue by removing the new line after the first image:

<img src="https://bulma.io/images/placeholders/128x128.png"><img src="https://bulma.io/images/placeholders/128x128.png">

h1 Tag issue

It appears to be due to the following css. The original code has 2 h1 elements that are siblings, whereas the vue code has the second h1 is not a sibling of the first h1 since it is in a div.

CSS (defined in bulma)

.content h1:not(:first-child) {
    margin-top: 1em;
}

Original HTML:

<h1>Bulma without VUE</h1>
<h1>Project 1</h1>

Vue Html:

<h1>Bulma with VUE</h1>
<div v-for="garden in gardens">
    <h1>{{garden.name}}<h1>
    ...
</div>