[Vuejs]-V-for loop in rendering HTML

by

0👍

✅

It is easy:

new Vue({
  el: "#app",
  data: {
    messages: ["abc","abc","xyz","xyz","abc","xyz"]
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="(msg,i) in messages">
    <template v-if="(messages[i-1] == undefined || messages[i-1] == 'xyz') && msg == 'abc'">
      ---
    </template>
    {{ msg }}
    <template v-if="(messages[i-1] == undefined || messages[i-1] == 'abc') && msg == 'xyz'">
      ---
    </template>
    </div>
</div>

Also you can create a computed property and generate the exact data you need then loop it inside html.

Leave a comment