CODEWITHSUNDEEP
javascriptvue.js
Ilkar
Ilkar

Reputation: 2177

Vue how to add next html element

i would like to create some kind of html template and put data one after another like this:

<template>
  <app-timeline>
    <app-timeline-item
      title="Goal Achieved"
      subtitle="All milestones are completed"
      time="few minutes ago"
      variant="success"
    >
        <div>Nick</div>
    </app-timeline-item


    <app-timeline-item
      title="Last milestone remain"
      subtitle="You are just one step away from your goal"
      time="3 minutes ago"
      variant="info"
    >
        <div>Mark</div>
    </app-timeline-item>

    <app-timeline-item
      title="Your are running low on time"
      subtitle="Only 30 minutes left to finish milestone"
      time="21 minutes ago"
      variant="warning"
    >
        <div>Max</div>
    </app-timeline-item>

    <app-timeline-item
      title="Client Meeting"
      subtitle="New event has been added to your schedule"
      time="36 minutes ago"
    >
        <div>Nico</div>
    </app-timeline-item>

    <app-timeline-item
      title="Product Design"
      subtitle="Product design added in workflow"
      time="1 hour ago"
      variant="secondary"
    >
        <div>Tom</div>
    </app-timeline-item>
  </app-timeline>
</template>

So as i assume te template should be:

<template>
  <app-timeline>
    <app-timeline-item
      title="{{ title }}"
      subtitle="{{ subtitle }}"
      time="{{ time}}"
      variant="{{ variant}}"
    >
        <div>{{ name }}</div>
    </app-timeline-item>
  </app-timeline>
</template>

how should i create method which will create new <app-timeline-item> every time i receive data (some kind of loop)?

Upvotes: 0

Views: 155

Answers (1)

Niaz Estefaie
Niaz Estefaie

Reputation: 577

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.

Upvotes: 6

Related Questions