I have this error and I dont know what is the value of keypath. I already tried to import messages array and defined in the data() the i18n locale, but it didn't work.
main.js
import Vue from 'vue';
import VueI18n from 'vue-i18n';
import VueRouter from 'vue-router';
import App from './App.vue';
import {routes} from './routes.js';
import {messages} from './i18n.js';
const i18n = new VueI18n({
locale: 'en',
messages
});
new Vue({
el: '#app',
router,
i18n,
render: h => h(App)
});
Main.vue
<template>
<div class="col-md-6 col-12 text-white">
<h2>new h2</h2>
<p>{{ $t('welcomeMsg') }}</p>
</div>
</template>
<script>
export default {};
</script>
i18n.js
const messages = {
"en": {welcomeMsg: 'Welcome to EN'},
"es": {welcomeMsg: 'Welcome to ES'}
};
Navbar.vue
<template>
<a v-on:click="changeLocale('es')">EN</a>
</template>
<script>
export default {
methods: {
changeLocale: function(locale) {
if(locale == "en"){
this.$i18n.locale = "es";
}else{
this.$i18n.locale = "en";
}
}
}
};
</script>
Related
I'm trying to access another page after i search for something in my search bar, but when i press enter nothing happens.
I already tried many different ways to access the DisplayBooks page after i searched for a books, but it only shows the DisplayBooks component in the url and the book data in the console.
Main.vue
<template>
<v-container>
<v-row class="text-center mt-10">
<v-col class="mb-4" >
<h3 class="display-2 font-weight-bold mb-3">
Your mobile library
</h3>
<p class="subheading font-weight-regular">
<v-text-field v-model="query" #keyup.enter="search" label="Search"></v-text-field>
</p>
</v-col>
</v-row>
</v-container>
</template>
<style scoped>
</style>
<script>
import axios from 'axios';
import router from '/router';
export default {
data() {
return {
query: ''
}
},
methods: {
async search() {
const url = `https://www.googleapis.com/books/v1/volumes?q=${this.query}`;
const response = await axios.get(url);
const books = response.data.items;
console.log(books)
router.push({
path: '/displaybooks',
name: 'displaybooks',
props: { books: books }
});
}
}
}
</script>
router.js
import Vue from 'vue'
import Router from 'vue-router'
import DisplayBooks from '#/components/DisplayBooks.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/displaybooks',
name: 'displaybooks',
component: DisplayBooks,
props: true
}
]
})
Main.js
import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'
import router from '/router'
Vue.config.productionTip = false
new Vue({
router,
vuetify,
render: h => h(App)
}).$mount('#app')
I am beginner vue. I use vue cli. Here is my code.
App.vue:
<template>
<div id="App">
<Count/>
</div>
</template>
<script>
import Count from './components/Count';
export default {
name:'App',
components:{
Count
}
};
</script>
Count.vue:
<template>
<div id="App">
<button #click="increase">{{count}}</button>
</div>
</template>
<script>
import {store} from './store/store.js';
export default {
name:'App',
computed:{
count(){
return store.state.count;
}
},
methods:{
increase(){
store.state.count++;
}
}
};
</script>
main.js:
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App)
}).$mount('#app')
When I run serve, It compiled fail, say Module not found: Error: Can't resolve './store/store.js'.
I need someone to help me.
sorry. I find the error,It was due to my carelessness.I import component with error path.
I am a newer for vue,now i there is a simple use about vue.
<template>
<div>
.......
</div>
</template>
<script>
export default {
data(){
.......
}
}
</script>
<template>
<div>
.......
</div>
</template>
<script>
export default{
data(){
....
}
}
</script>
the above is two components.
the following is my App.vue and router:
import Vue from "vue";
import VueRouter from "vue-router";
import home from "#/components/home.vue";
import about from "#/components/about.vue";
Vue.use(VueRouter);
export default new Router({
routes : [
{
path:"./home",
component:home
},
{
path:"./about",
component:about
},
]
})
<template>
<div id = "app">
<img src="./assets/logo.png">
<header>
<router-link to="/home">Home</router-link>
<router-link to="/about">About</router-link>
</header>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: ""
}
</script>
this is my main.js:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
But there is nothing about my code?
What's wrong with my code?Is there wrong about my router? How to solver it? I have confused it for a long time.Anyone can help me?
Try changing the route path from ./home to /home
routes : [
{
path:"/home",
component: home
},
{
path:"/about",
component: about
},
]
UPDATE:
It magically starts to work later on after I clear browser cache, I do not know what happened before.
I wonder how to include router-view in a component rather than directly use it?
For Example:
main.js
import Vue from 'vue'
import router from "./router"
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App),
router
})
App.vue
<template>
<div>
<page-content></page-content>
</div>
</template>
<script>
import pageContent from "./page-content.vue";
export default {
name: 'app',
data() { return {}; },
components: {
"page-content": pageContent
}
}
</script>
page-content.vue
<template>
<div class="page-content">
<router-view>
</router-view>
</div>
</template>
<script>
export default {
}
</script>
router.js
import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const routes = [{ path: '/', component: Foo }]
export default new VueRouter({
routes
})
The problem is I can not see foo shown up on page
When I am using another template (Header.vue) inside the main template Index.vue, it throws an error "$scrollTo" is not defined.
Note : $scrollTo is provided by the module "vue2-scrollspy" which I have installed.
However if I paste the entire code of Header.vue inside Index.vue it works fine.
Index.vue
<template>
<div class="scroll-div">
<mainheader></mainheader>
</div>
</template>
<script>
import mainheader from './Header.vue'
export default {
name: 'MyApplication',
components:{
mainheader
}
}
</script>
Header.vue
<template>
<div class="main-Header">
<b-navbar toggleable="md" type="dark" variant="dark" fixed="top">
<div class="container">
<b-navbar-brand #click="$scrollTo(0)"></b-navbar-brand>
</div>
</b-navbar>
</div>
</template>
<script>
export default {
name : 'mainheader',
data () {
return {
msg: 'Welcome to SportsBee',
scrollPos: 0
}
}
}
</script>
index.js
import Scrollspy from 'vue2-scrollspy';
Vue.use(Scrollspy);
Vue.use(VueAxios, axios);
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
{
path: '/',
name: 'index',
component: index
}
], mode:"history"
})
export default router;
main.js
import Vue from 'vue'
import App from './App'
import router from './router'
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})