[Vuejs]-Space disabled on concatenation

by

0👍

Inside html template such as li you have to specify space characters using  ;

<ul>
  <li v-for="(skill,index) of skills" :key="index">{{ skill + ','}}&nbsp;</li>
</ul>

also checkout https://www.w3schools.com/html/html_entities.asp
to learn more about HTML entities

0👍

With that code you will get a list of <li></li> elements with each skill looking like this:

<li>HTML5,</li><li>CSS3,</li><li>...

just add a class or even a style with a margin to the right to add a little space between the elements either:

<ul>
  <li v-for="(skill,index) of skills" style="margin-right: 5px" :key="index">{{ skill }}</li>
</ul>

better:

<ul>
  <li v-for="(skill,index) of skills" class="class-with-some-margin-right" :key="index">{{ skill }}</li>
</ul>

0👍

You can add the ', ' after each item using CSS like so:

var example1 = new Vue({
  el: '#example-1',
  data: {
    skills: ["HTML5", "CSS3", "SCSS", "Bootstrap", "JavaScript",
             "Vue.js", "PHP", "MySQL", "Symfony", ]
  }
})
/* styling help: 
  Q: https://stackoverflow.com/questions/1517220/
  A: https://stackoverflow.com/a/1517228/7505395 */

#example-1 {
  display: inline;
  list-style: none;
}

#example-1 li {
  display: inline;
}

#example-1 li:after {
  content: ", ";
}

#example-1 li:last-child:after {
    content: "";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<ul id="example-1">
  <li v-for="(sk, idx) in skills" :key="idx">{{ sk }}</li>
</ul>

This answer incorporates it into Vue, for the pure css answer, go here.

As always you can also combine normal text inside Vues {{}} like so : {{ skill + ', ' }} – not sure if thats helpfull though as it applies to all replacement and you end up having a trailing ,

Leave a comment