时间戳

首页 > 解决方案 > 我需要使用 vue.js 制作自己的数据迭代器，以在插槽中公开每个项目数据

vue.js - 我需要使用 vue.js 制作自己的数据迭代器，以在插槽中公开每个项目数据

问题描述

我需要使用 vue.js 制作我自己的数据迭代器来执行类似于下面示例的操作。我知道这是可能的，我在 Vuetify 中看到过，我认为它在 v-data-table 中，组件接受一个数组并在插槽中公开每个项目。

非常感谢您！:D

这个例子：

<name-iterator :names='["John","Jack","Klark","Kent"]' >
  <p>{{name}}</p>
</name-iterator>

输出：

John
Jack
Klark
Kent

标签： vue.js

解决方案

如果我理解正确，请尝试以下代码段：

Vue.component('name-iterator', {
  template: `
    <div>
      <li v-for="(name, i) in names" :key="i">
        {{ name }}
      </li>
    </div>
  `,
  props: ['names']
})

new Vue({
  el: '#demo',
  data() {
    return {
      items: ["John","Jack","Klark","Kent"]
    }
  }
})

Vue.config.productionTip = false
Vue.config.devtools = false
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <name-iterator :names='items' />
</div>

推荐阅读