Skip to content

Instantly share code, notes, and snippets.

@jacoyutorius

jacoyutorius/vue-pibot-table.html

Created May 23, 2017 07:37
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jacoyutorius/0ee9cb9e6968ab81df23700a622f9fbb to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jacoyutorius/0ee9cb9e6968ab81df23700a622f9fbb to your computer and use it in GitHub Desktop.
Download ZIP
Raw
vue-pibot-table.html
<!DOCTYPE html>
<html>
<head>
<title>Vue-cross</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- vue.js -->
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<h2>vue-cross</h2>
<div id="app">
{{ message }}
<table class="table">
<thead>
<tr>
<th></th>
<th v-for="user in users">
{{ user.name }}
</th>
</tr>
</thead>
<tbody>
<tr v-for="item in items">
<th scope="row">{{ item.name }}</th>
<td v-for="user in users">
<div id="item">
<label>{{ user.name }} × {{ item.name }}</label>
<cell message="test"></cell>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
Vue.component('cell', {
props: ["message"],
template: '<div><label>{{ message }}</label><input type="text" size="4"><button class="btn btn-sm btn-primary"><span class="glyphicon glyphicon-floppy-save" aria-hidden="true"></span></button></div>'
})
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
users: [
{name: "yuto", qty: 10},
{name: "asano", qty: 12},
{name: "yano", qty: 1},
{name: "yuji", qty: 30},
],
items: [
{name: "item1", count: 100},
{name: "item2", count: 230},
{name: "item3", count: 402},
{name: "item4", count: 50},
]
}
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment