[Vuejs]-Vue how to add next html element

by

6👍

✅

Based on what you asked you can use v-for in this case:

new Vue({
  data() {
   return {
    array: [
      {title: "Title one", subtitle: "Subtitle one", time: "Time one", variant: "Info", name: "Mark"},
      {title: "Title two", subtitle: "Subtitle two", time: "Time two", variant: "Danger", name: "Tag"},
      {title: "Title three", subtitle: "Subtitle three", time: "Time three", variant: "Success", name: "Robert"},
      {title: "Title four", subtitle: "Subtitle four", time: "Time four", variant: "Primary", name: "Sara"}
    ]
   }
  },
  methods: {
    addSomeItemsToArray() {
      this.array.push({title: "Title five", subtitle: "Subtitle five", time: "Time five", variant: "secoundary"})
    }
  }
})
<template>
  <app-timeline>
    <app-timeline-item
      v-for="item in array"
      :key="item.title"
      :title="item.title"
      :subtitle="item.subtitle"
      :time="item.time"
      :variant="item.variant"
    >
      <div>{{item.name}}</div>
    </app-timeline-item>
</app-timeline>
</template>

If you want to add any item to the array you can do it with Array.push().
This will help you even when you want to add any item in an ajax request.

👤Niaz Estefaie

Leave a comment