My vue.js app routing is not working, please help, there is not a lot of code , simply copy paste this code in your index.html, you'll see the weird errors . its like we cant use scripts when using the vue router.:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Starter Vue.js Bt4</title>
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<!-- Our Custom CSS -->
<link rel="stylesheet" href="style.css">
<!-- Font Awesome JS -->
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
<!-- Load polyfills to support older browsers -->
<script src="https://polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver"></script>
<!-- Required scripts -->
<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div class="wrapper" id="app">
<router-link to="/users">Users</router-link>
<router-link to="/home">Go to HOME</router-link>
<router-view></router-view>
<script type="text/x-template" id="users">
<p>
<ul id="demo">
<li v-repeat="items" >
{parentMsg}} {{childMsg}}
</li>
</ul>
</p>
</script>
<script type="text/x-template" id="home">
<button v-on:click="count++">Vous mavez cliqué {{ count }} fois.</button>
</script>
</div>
</body>
<script>
var Home = {
data: function () {
return {count: 0}
},template: "#home"
}
const Users= {
template: "#users",
data: {
items: [
{ childMsg: 'Foo' },
{ childMsg: 'Bar' }
]
}
}
const routes = [
{ path: '/home', component:Home},
{ path: '/users', component: Users}
]
const router = new VueRouter({
routes // short for `routes: routes`
})
const app = new Vue({
router
}).$mount('#app')
</script>
this is the error it doesnt work, please help : Error nothing works, displaying users is impossible :
[Vue warn]: The "data" option should be a function that returns a per-instance value in component definitions. vue.js:634:17
[Vue warn]: Property or method "count" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
(found in <Root>) vue.js:634:17
[Vue warn]: Property or method "childMsg" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
(found in <Root>) vue.js:634:17
[Vue warn]: Property or method "items" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
found in
---> <Anonymous>
<Root> vue.js:634:17
[Vue warn]: Failed to resolve directive: repeat
(found in <Anonymous>)
AngularJs was working all of the time, why this is not working ? Thanks for helping me, nothing works, files .vue not working either, no explanation, im going back to angularJs thank you
EDIT : template literal not working with routing neither :
const Users= {
template: `
<p>
<ul id="demo">
<li v-repeat="items" >
{parentMsg}} {{childMsg}}
</li>
</ul>
</p>
`,
data() {
return {items: [
{ childMsg: 'Foo' },
{ childMsg: 'Bar' }
]}
}
}
the error : [Vue warn]: Failed to resolve directive: repeat
[Vue warn]: Property or method "childMsg" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
(found in <Anonymous>)
EDIT 2: It is working with the following template litteral, but i dont want this kind of templating at all , it is not easy to write inside of the javascript, I need to use the balise or .vue files, and nothing works .:
const Users= {
template: `
<p>
<ul id="demo">
<li v-for="item in items" >
{{item.childMsg}}
</li>
</ul>
</p>
`,
data() {
return {items: [
{ childMsg: 'Foo' },
{ childMsg: 'Bar' }
]}
}
}
Edit, after reading this : https://vuejs.org/2015/10/28/why-no-template-url/
I will try to write templates inside of the JS code
EDIT : Resolved there :Unable to add any module without WebPack
