I've recently dipped my toes into the world of Javascript and vue.js.
After following a tutorial on creating a single page shopping application, I decided to incorporate routers into my learning project.
However, I encountered some interesting errors in the console.
Could someone guide me through where I might be going wrong?
This is how my index.html looks:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id = "app">
<h1>Shopping Cart</h1>
<ul>
<li v-for="item in shoppingCart">
{{ item.label }} {{ item.cost }} euros
<a href="#" @click="addItem(item)"> {{ isSelected(item) }} </a>
</li>
<p>total = {{ getTheTotal }} euros</p>
</ul>
<li v-for="item in shoppingCart">
<router-link to="item.link"><img v-if= "item.selected == true"width="150" height="100" :src="item.url"></img></router-link>
</li>
<router-view></router-view>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src = "vue.js"></script>
</body>
</html>
And this is my vue.js file:
const Bananas = { template: '<div>in bananas</div>' }
const Apples = { template: '<div>in apples</div>' }
const Pears = { template: '<div>in apples</div>' }
const Cars = { template: '<div>in apples</div>' }
const router = new VueRouter ({
routes: [
{ path: '/bananas', component: Bananas },
{ path: '/apples', component: Apples },
{ path: '/pears', component: Pears },
{ path: '/cars', component: Cars }
]
})
const app = new Vue ({
el: "#app",
data: {
shoppingCart: [
{ label: "Apples", cost: 2, selected: false, url: 'https://i2.wp.com/ceklog.kindel.com/wp-content/uploads/2013/02/firefox_2018-07-10_07-50-11.png', link: "/apples" },
{ label: "Pears", cost: 3, selected: false, url: 'https://post.healthline.com/wp-content/uploads/2018/11/10617-Do_You_Have_a_Pear_Allergy-_732x549-thumbnail.jpg', link: "/pears" },
{ label: "Bananas", cost: 5, selected: false, url: 'https://media.lactualite.com/2014/08/banane.jpg',link: "/bananas" },
{ label: "Cars", cost: 5000, selected: false, url: 'https://specials-images.forbesimg.com/imageserve/5d3703e2f1176b00089761a6/960x0.jpg?cropX1=836&cropX2=5396&cropY1=799&cropY2=3364', link: "/cars" }
]
},
computed: {
getTheTotal() {
let rez = 0
this.shoppingCart.forEach(element => {
if (element.selected == true) {
rez += element.cost
}
console.log(rez)
})
return rez
}
},
methods: {
addItem: function(item) {
if (item.selected == false)
item.selected = true
else if (item.selected == true)
item.selected = false
},
isSelected: function(item) {
if (item.selected == true)
return ("remove")
if (item.selected == false)
return ("add")
}
}
}).$mount('#app')
Here are the errors I'm facing:
[Vue warn]: Error in render: "TypeError: Unable to get property 'matched' of undefined or null reference"
(found in <Root>)
TypeError: Unable to get property 'matched' of undefined or null reference
[Vue warn]: Cannot find element: #app
[Vue warn]: Error in render: "TypeError: Unable to get property 'matched' of undefined or null reference"
(found in <Root>)
TypeError: Unable to get property 'matched' of undefined or null reference
As a result, the page isn't displaying anything anymore.
Your assistance is greatly appreciated! :)
Since I'm also new to stack overflow, please feel free to provide feedback if my post isn't presented correctly.