Skip to content

Instantly share code, notes, and snippets.

/index.html

Created January 12, 2017 17:28
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save anonymous/4a4f242fd6f605365077afa1dc39cecf to your computer and use it in GitHub Desktop.
Save anonymous/4a4f242fd6f605365077afa1dc39cecf to your computer and use it in GitHub Desktop.
Download ZIP
Vue Multidimentional Object data // source https://jsbin.com/tobelil
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Vue Multidimentional Object data</title>
</head>
<body>
<div id="app">
<div v-for="widget in widget_data">
<h4> {{ widget.title }} </h4>
<div v-for="curr in widget.body">
<p v-for="(amount, name) in curr">> {{name}} = {{amount}} </p>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<script id="jsbin-javascript">
new Vue({
el: '#app',
data: {
widget_data: [{
title: 'In 2011',
body: [
{USD: 30},
{XCD: 20},
{CAD: 10}
]
},
{
title: 'In 2012',
body: [
{USD: 130},
{XCD: 210}
]
}]
}
});
</script>
<script id="jsbin-source-javascript" type="text/javascript">new Vue({
el: '#app',
data: {
widget_data: [{
title: 'In 2011',
body: [
{USD: 30},
{XCD: 20},
{CAD: 10}
]
},
{
title: 'In 2012',
body: [
{USD: 130},
{XCD: 210}
]
}]
}
});</script></body>
</html>
Raw
jsbin.tobelil.js
new Vue({
el: '#app',
data: {
widget_data: [{
title: 'In 2011',
body: [
{USD: 30},
{XCD: 20},
{CAD: 10}
]
},
{
title: 'In 2012',
body: [
{USD: 130},
{XCD: 210}
]
}]
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment