euperia/vue2-table-example.html

## vue2-table-example.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue 2 table example</title>
</head>
<body>
   <div id="app">

  <table width="90%" border="1" cellpadding="2" cellspacing="2" v-show="sites.length > 0">
    <thead>
      <tr>
        <th></th>
        <th>Site</th>
        <th>URL</th>
      </tr>
    </thead>
      <tbody>
	    <!--
		You would usually use the default Vue component syntax here,
		e.g, <scan-row></scan-row>, but this won't work with some elements.
		So we use the root element and use the `is=""` attribute to denote the component name
            -->
	    <tr is="scan-row" v-for="site in sites" :site="site"></tr>

      <tbody>
  </table>
</div>

<script type="text/x-template" id="tplScanRow">
    <tr>
        <td>{{ site.id }}</td>
        <td>{{ site.name }}</td>
        <td>{{ site.url }}</td>
    </tr>
</script>

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<script>

  var sites = [
    {"id":1,"name":"Google","url":"https:\/\/www.google.com.ie"},
    {"id":2,"name":"Facebook","url":"https://www.facebook.com"},
    {"id":3,"name":"Twitter","url":"https://twitter.com"}
  ];

Vue.component('scan-row', {
    template: '#tplScanRow',
    props: {'site': Object},
});

var vm = new Vue({

  el: '#app',
  data: {
    sites: sites
  }
});

</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Vue 2 table example</title>
	</head>
	<body>
	<div id="app">

	<table width="90%" border="1" cellpadding="2" cellspacing="2" v-show="sites.length > 0">
	<thead>
	<tr>
	<th></th>
	<th>Site</th>
	<th>URL</th>
	</tr>
	</thead>
	<tbody>
	<!--
	You would usually use the default Vue component syntax here,
	e.g, <scan-row></scan-row>, but this won't work with some elements.
	So we use the root element and use the `is=""` attribute to denote the component name
	-->
	<tr is="scan-row" v-for="site in sites" :site="site"></tr>

	<tbody>
	</table>
	</div>

	<script type="text/x-template" id="tplScanRow">
	<tr>
	<td>{{ site.id }}</td>
	<td>{{ site.name }}</td>
	<td>{{ site.url }}</td>
	</tr>
	</script>

	<script src="https://unpkg.com/vue/dist/vue.js"></script>

	<script>

	var sites = [
	{"id":1,"name":"Google","url":"https:\/\/www.google.com.ie"},
	{"id":2,"name":"Facebook","url":"https://www.facebook.com"},
	{"id":3,"name":"Twitter","url":"https://twitter.com"}
	];

	Vue.component('scan-row', {
	template: '#tplScanRow',
	props: {'site': Object},
	});

	var vm = new Vue({

	el: '#app',
	data: {
	sites: sites
	}
	});

	</script>
	</body>
	</html>