It looks like the only thing wrong is the order of the tags.
You just need to run the vue code after the <div id="app"> tag is loaded into the DOM. Here’s an example:
<html>
<head>
<!-- Include all CDN scripts here -->
</head>
<body>
<div id="app" >
</div>
<script>
// Needs to be called after the <div id="app"> tag is loaded into the DOM
var app = new Vue({
el: '#app',
...
})
</script>
</body>
</html>
I’m trying to use this code hosting on Firebase, but it doesn’t work. {{Item.name}} appears instead of the value 🙁
I already tested the same code on Codepen and it worked. Does the firebase accept vue.min.js?
When deploying, the site displays the {{var}} instead of the table value in Google Sheets.
I’m trying to use this code hosting on Firebase, but it doesn’t work. {{Item.name}} appears instead of the value 🙁
I already tested the same code on Codepen and it worked. Does the firebase accept vue.min.js?
When deploying, the site displays the {{var}} instead of the table value in Google Sheets.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<script>
var app = new Vue({
el: '#app',
mounted() {
let vm = this
axios
.get(
'https://sheets.googleapis.com/v4/spreadsheets/{sheetsID}/values/A2:C20?key={apiKey}'
)
.then(function (response) {
let specials = response.data.values
for (let index = 0; index < specials.length; index++) {
const element = specials[index]
let mitem = {
name: element[0],
description: element[1],
price: element[2]
}
if (vm.isEven(index)) {
vm.menuItems_L = vm.menuItems_L.concat(mitem)
} else {
vm.menuItems_R = vm.menuItems_R.concat(mitem)
}
}
console.log(response)
})
},
data: {
menuItems_L: [],
menuItems_R: [],
menuStyle: {
background: '#f2f2f2',
color: '#000'
}
},
computed: {},
methods: {
isEven: function (n) {
return n % 2 == 0
}
}
});
</script>
<body>:
<div id="app">
<section id="specialssection" class="specials-container" v-if="menuItems_L" :style="menuStyle">
<div id="special_component" :style="menuStyle">
<div class="specials-table-container">
<table>
<tbody v-for="item in menuItems_L" :key="item.name">
<tr class="nameandprice">
<td>
<span :style="menuStyle">{{item.name}}</span>
</td>
<td>
<span :style="menuStyle">R${{item.price}}</span>
</td>
</tr>
<tr class="description">
<td colspan="2">{{item.description}}</td>
</tr>
</tbody>
</table>
<table>
<tbody v-for="item in menuItems_R" :key="`specialmenu-${item.name}`">
<tr class="nameandprice">
<td>
<span :style="menuStyle">{{item.name}}</span>
</td>
<td>
<span :style="menuStyle">${{item.price}}</span>
</td>
</tr>
<tr class="description">
<td colspan="2">{{item.description}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
</div>