...
| Code Block |
|---|
<template>
<div>
<h1>Basket</h1>
<hr>
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Item</th>
<th scope="col">Price</th>
<th scope="col">Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>JDL EXTREME</td>
<td>600000</td>
<td>x2</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
name: 'Cart',
data() {
return {
items: []
}
},
methods: {
},
created() {
}
}
</script> |
Then update the App.vue file to look like this
| Code Block |
|---|
<template>
<div id="app">
<div class="container">
<div class="row">
<div class="col-sm-8">
<Products />
</div>
<div class="col-sm-4">
<Cart />
</div>
</div>
</div>
</div>
</template>
<script>
import Products from './components/Products.vue'
import Cart from './components/Cart.vue'
export default {
name: 'App',
components: {
Products,
Cart
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
margin-top: 60px;
}
</style>
|
Refresh your browser and you should have this view
...