Как добавить пробел в цикле vue js?

Question

[Evashing]

Взял с бутстрапа блоки и получаю с апи данные, которые разбираю в цикле v-for в vue js в коде. Я хочу, чтобы между блоками был пробел (как в html <br>), а он лепит все без пробелов.

Код:

<div id="main_app">     
     <div class="card" style="width: 50rem;" v-for="blog in data" >         
         <div class="card-body">           
              <h5 class="card-title"><i>{{name1}}</i></h5>           
              <p class="card-text"><i>{{name2}}</i></p>           
              <a href="/admin" class="btn btn-primary">Читать полностью</a>         
</div>    
    </div> 
         </div>

Comments

[Aetae]

Какой пробел между какими блоками? Может ты имеешь ввиду отступ? Разницы меж тем что генерирует vue и тем что ты нафигачишь руками "в html" нет, разбирайся со стилями\классами.

Answer 1

[Владимир Коротенко]

<template v-for="fruit in fruits" >
  <span>{{fruit}}</span><slot> </slot>
</template>
или так
<template v-for="fruit in fruits" >
  <span>{{fruit}}</span>{{ ' ' }}
</template>

Comments

[Evashing]

Спасибо большое, а Вы можете подсказать, мне в name2 приходит огромная строка, как можно получить текст до точки либо воскл.знака?

P.s а можно чем-то заменить template? А -то кнопки растягивает на весь экран а рамки у плиттк пропадают

[Владимир Коротенко]

Evashing, template можно заменить на div .
а по длине используйте фильтры
https://v2.vuejs.org/v2/guide/filters.html?redirec...
в фильтре ищите либо регекспом либо indexOf вхождение и возвращаете