JSFiddle - React, Tailwind, and code Playground

by asemahle

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>
<div id="app">
  <div class="container">
    <div class="content">

      <my-component :list-data="listData" name-prop="name"></my-component>

    </div>
  </div>
</div>

<template id="my-component">
	<div v-for="item in listData">
	  <span>{{item[nameProp]}}</span>
	</div>
</template>

JavaScript

Vue.component('my-component', {
  template: '#my-component',
  props: ['listData', 'nameProp']
});

new Vue({
  el: '#app',
  data: {
    listData: [
    	{name: 'Item 1'},
      {name: 'Item 2'},
      {name: 'Item 3'},
    ]
  }
});