Вывод массива vue js

Question

Я новичок. Есть массив городов, выводится в span. Надо чтобы между элементами был разделитель. Cделал так:

<span v-for="city in users_cities">{{city}}, </span>

Но получается так, что выводится вот так

То есть выводится первая пустая запятая и в конце. Хотелось бы, чтобы запятые были только между элементами. Заранее спасибо!

Answer 1

Используя условную отрисовку(директиву v-if), проверяете индекс текущего элемента на каждом шагу итерации и выводим запятые для всех кроме последнего, как:

new Vue({
  el: '#app',
  data() {
    return {
      users_cities: ['Город1', 'Город2', 'Город3', 'Город4', ]
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <span v-for="(city,index) in users_cities">
  {{city}}<template v-if="index<users_cities.length-1">,</template>
  </span>
</div>

БЛОГ НА HUSL

Вывод массива vue js

Ответы (1 шт):