Skip to content

Instantly share code, notes, and snippets.

/index.html

Created July 26, 2016 19:00
Show Gist options
  • Save anonymous/b221d1a1cda9ea43f6b08389e4d54428 to your computer and use it in GitHub Desktop.
Save anonymous/b221d1a1cda9ea43f6b08389e4d54428 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/kiqozuricu
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<table>
<tbody>
<template id="parent-template">
<child v-for="item in inventory" :inventory_item="item"></child>
</template>
</tbody>
</table>
<script id="jsbin-javascript">
Vue.component('child', {
template: '<tr><td>{{ inventory_item.sku }}</td><td>{{ inventory_item.location }}</td><td>{{ inventory_item.quantity }}</td></tr>',
props: ['inventory_item'],
data: function () {
return { }
},
compiled: function () {
console.log(this.inventory_item) // passed from parent
}
});
var parent = new Vue({
el: '#parent-template',
data: function () {
return {
inventory: [
{
'sku': '123',
'location': 'NYC',
'quantity': 5000
},
{
'sku': '345',
'location': 'Chicago',
'quantity': 8000
},
{
'sku': '678',
'location': 'LA',
'quantity': 3000
}
]
}
}
});
</script>
<script id="jsbin-source-javascript" type="text/javascript">Vue.component('child', {
template: '<tr><td>{{ inventory_item.sku }}</td><td>{{ inventory_item.location }}</td><td>{{ inventory_item.quantity }}</td></tr>',
props: ['inventory_item'],
data: function () {
return { }
},
compiled: function () {
console.log(this.inventory_item) // passed from parent
}
});
var parent = new Vue({
el: '#parent-template',
data: function () {
return {
inventory: [
{
'sku': '123',
'location': 'NYC',
'quantity': 5000
},
{
'sku': '345',
'location': 'Chicago',
'quantity': 8000
},
{
'sku': '678',
'location': 'LA',
'quantity': 3000
}
]
}
}
});</script></body>
</html>
Raw
jsbin.kiqozuricu.js
Vue.component('child', {
template: '<tr><td>{{ inventory_item.sku }}</td><td>{{ inventory_item.location }}</td><td>{{ inventory_item.quantity }}</td></tr>',
props: ['inventory_item'],
data: function () {
return { }
},
compiled: function () {
console.log(this.inventory_item) // passed from parent
}
});
var parent = new Vue({
el: '#parent-template',
data: function () {
return {
inventory: [
{
'sku': '123',
'location': 'NYC',
'quantity': 5000
},
{
'sku': '345',
'location': 'Chicago',
'quantity': 8000
},
{
'sku': '678',
'location': 'LA',
'quantity': 3000
}
]
}
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment