<html>
<head>
<title>Menu Items</title>
</head>
<body>
<div id="app">
<h1>Menu Items</h1>
<ul>
<li v-for="item in items">
<h3>{{ item['fields']['Item'] }}</h3>
<p>{{ item['fields']['Description'] }}</p>
<p><strong>Price: </strong>${{ item['fields']['Price'] }}</p>
<p><strong>Category: </strong>{{ item['fields']['Category'] }}</p>
<img :src="item['fields']['Photo'][0]['thumbnails']['large']['url']" alt="" v-if="item['fields']['Photo']" width="150">
</li>
</ul>
</div><!--app-->

<!-- Include Dependancy Scripts -->
<script type="text/javascript" src="https://unpkg.com/vue"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.min.js"></script>
<style>
h1 {
text-align: center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
li {
width: 250px;
background: #e6e6e6;
border-radius: 15px;
padding: 15px;
text-align: center;
margin: 50px;
}
</style>

<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
items: []
},
mounted: function(){
this.loadItems();
},
methods: {
loadItems: function(){

// Init variables
var self = this
var app_id = "appf1Zn6YiaLEc9DU";
var app_key = "keykaKtgL2508O2Ea";
this.items = []
axios.get(
"https://api.airtable.com/v0/"+app_id+"/Menu?view=Grid%20view",
{
headers: { Authorization: "Bearer "+app_key }
}
).then(function(response){
self.items = response.data.records
}).catch(function(error){
console.log(error)
})
}
}
})
</script>
</body>

</html>