First try with vue.js. Problems using routers

Question

I'm actually a beginner in Javascript and vue.js.

I followed a tutorial to create a shopping single page application and i learned about router so i wanted to use them on this learning project.

I got some interestiong errors in the console.

Can someone explain me where am i doing something wrong?

index.html:

<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 the vue.js:

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')

the errors:

[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

the page doesn't display anything anymore.

Thanks a lot! :)

i'm also a beginner on stack overflow so feel free to tell me if my post is wrong

a lot! ``` [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``` — Antoine
– Antoine, Commented Jan 21, 2021 at 14:52

Dan · Accepted Answer · 2021-01-21 15:14:09Z

1

You didn't pass the router object to the new Vue call so the app is unaware of the router / routes:

const app = new Vue ({
  router,         // ✅ Add this
  el: "#app",
  ...
});

You also need to use a : binding on the <router-link> to attribute as follows:

<router-link :to="{ path: item.link }">
  <img v-if="item.selected" width="150" height="100" :src="item.url">
</router-link>

And fix your data (3 out of 4 say "apples"):

const Bananas = { template: '<div>in bananas</div>' }
const Apples = { template: '<div>in apples</div>' }
const Pears = { template: '<div>in pears</div>' }
const Cars = { template: '<div>in cars</div>' }

edited Jan 21, 2021 at 15:14

answered Jan 21, 2021 at 14:57

Dan

63.5k18 gold badges113 silver badges122 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Our_Benefactors · Accepted Answer · 2021-01-21 14:57:55Z

0

You need to call Vue.use(router) before you declare your Vue instance.

answered Jan 21, 2021 at 14:57

Our_Benefactors

3,6273 gold badges25 silver badges30 bronze badges

2 Comments

Antoine Over a year ago

Thanks! where am i supposed to put this line?

Our_Benefactors Over a year ago

before const app = new Vue ({

Collectives™ on Stack Overflow

First try with vue.js. Problems using routers

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related