CODEWITHSUNDEEP
vue.js
new programmer
new programmer

Reputation: 55

Can I add space without a v-for?

<img :src="item" v-for="item in images" />space

how to add a space after the /> ?

I have to do it.

Upvotes: 0

Views: 916

Answers (1)

skirtle
skirtle

Reputation: 29092

To start with you'll need to wrap the image and space in a <template>. But it's a bit more complicated than that because Vue strips out spaces in various circumstances.

Here's one way you could do it, using {{ ' ' }} to force the space to be retained:

new Vue({
  el: '#app',
  
  data () {
    return {
      images: [1, 2, 3, 4, 5, 6, 7, 8, 9]
    }
  }
})
#app {
  background: #ddd;
  text-align: justify;
  width: 200px;
}

img {
  width: 40px;
}
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>

<div id="app">
  <template v-for="item in images">
    <img src="https://vuejs.org/images/logo.png">
    {{ ' ' }}
  </template>
</div>

A dummy element, like a <span>, could also be used instead of the {{ ' ' }}.

You may want to consider using flex-box instead of text-align: justify.

Upvotes: 1

Related Questions