Vue如何添加下一个html元素

Question

我想创建某种 html 模板并将数据依次放入，如下所示：

<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>

所以我认为模板应该是：

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

我应该如何创建每次收到数据时都会创建新数据的方法<app-timeline-item>（某种循环）？

Answer 1

根据您的要求，在这种情况下您可以使用 v-for ：

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>

如果您想向数组添加任何项目，可以使用 Array.push() 来完成。即使您想在 ajax 请求中添加任何项目，这也会对您有所帮助。