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')
Main.js
import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify';
Vue.config.productionTip = false
new Vue({
vuetify,
render: h => h(App)
}).$mount('#app')
App.vue
template>
<v-app>
<Navbar/>
<div>
<v-content class="mx-4 mb-4">
<router-view></router-view>
</v-content>
</div>
</v-app>
</template>
<script>
import Navbar from '#/components/Navbar'
export default {
name: 'App',
components: {
Navbar
},
data: () => ({
//
}),
};
</script>
Navbar.vue (current)
<template>
<div>
<v-app-bar app flat color="">
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>
<span>Sample App</span>
</v-toolbar-title>
</v-app-bar>
</div>
</template>
....
....
Navbar.vue (desired)
no template because I want to use render function
<script>
export default {
...
...
render(createElement){
const icon = createElement('v-app-bar-nav-icon')
return createElement('v-app-bar', [icon])
...
...
}
}
When I try this I get an errors:
vue.common.dev.js?4650:630 [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
Any suggestions?
For future reference:
You simply have to import the vuetify components manually into the vue component.
Navbar.vue
<script>
import { VAppBar, VAppBarNavIcon } from "vuetify/lib";
export default {
render(createElement) {
const icon = createElement(VAppBarNavIcon)
return createElement(VAppBar, {}, [icon]);
},
};
</script>
More info at this link.
I am having an issue while adding routes in Vue using Vue-router. I know it is a warning but still, I need to solve this issue, so your help will be appreciated. I am working with laravel vue and I am beginner.
I tried almost every StackOverflow link to remove this warning but failed. Below you can see my code.
app.js
window.Vue = require('vue');
import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material.min.css'
import moment from 'moment'
import $ from 'jquery'
import 'datatables.net'
import routes from './components/includes/routes'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
Vue.use(VueMaterial)
import App from './components/views/App'
Vue.filter('formatDate', function(value) {
if (value) {
return moment(String(value)).format('L (LT)')
}
});
Vue.component('example-component', require('./components/ExampleComponent.vue'));
Vue.component('app-component', require('./components/views/App.vue').default);
Vue.component('donations-component', require('./components/views/Donations.vue'));
Vue.component('needy-component', require('./components/views/Needy.vue'));
var router = new VueRouter({
routes: routes,
mode: 'history'
})
const app = new Vue({
el: '#app',
components: { App },
router,
});
routes.js
import Needy from '../views/Needy'
const routes = [
{
path: '/home',
name: 'donations',
component: Donations,
},
{
path: '/needy',
name: 'needy',
component: Needy,
},
];
export default routes
App.vue
<div class="page-container md-layout-column">
<md-toolbar class="md-primary">
<md-button class="md-icon-button" #click="showNavigation = true">
<md-icon>menu</md-icon>
</md-button>
<span class="md-title">My Title</span>
<div class="md-toolbar-section-end">
<md-button #click="showSidepanel = true">Favorites</md-button>
</div>
</md-toolbar>
<md-drawer :md-active.sync="showNavigation" md-swipeable>
<md-toolbar class="md-transparent" md-elevation="0">
<span class="md-title">My App name</span>
</md-toolbar>
<md-list>
<md-list-item>
<md-icon>move_to_inbox</md-icon>
<router-link :to="{ name: 'donations' }" class="md-list-item-text">Donations</router-link>
</md-list-item>
<md-list-item>
<md-icon>move_to_inbox</md-icon>
<router-link :to="{ name: 'needy' }" class="md-list-item-text">Needy</router-link>
</md-list-item>
</md-list>
</md-drawer>
<md-content>
<router-view></router-view>
</md-content>
</div>
</template>
<script>
export default {
data (){
return {
showNavigation: false,
showSidepanel: false
}
}
}
</script>
<style lang="scss" scoped>
</style>
Error in browser console
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the
parent component re-renders. Instead, use a data or computed property based on the prop's value.
Prop being mutated: "to"
found in
---> <RouterLink>
<MdRipple> at src/components/MdRipple/MdRipple.vue
<MdListItemContent> at src/components/MdList/MdListItem/MdListItemContent.vue
<MdListItemDefault> at src/components/MdList/MdListItem/MdListItemDefault.vue
<MdList> at src/components/MdList/MdList.vue
<MdDrawer> at src/components/MdDrawer/MdDrawer.vue
<AppComponent> at resources/js/components/views/App.vue
<Root> vue.js:597:15
[Vue warn]: $attrs is readonly.
found in
---> <RouterLink>
<MdRipple> at src/components/MdRipple/MdRipple.vue
<MdListItemContent> at src/components/MdList/MdListItem/MdListItemContent.vue
<MdListItemDefault> at src/components/MdList/MdListItem/MdListItemDefault.vue
<MdList> at src/components/MdList/MdList.vue
<MdDrawer> at src/components/MdDrawer/MdDrawer.vue
<AppComponent> at resources/js/components/views/App.vue
<Root> vue.js:597:15
[Vue warn]: $listeners is readonly.
found in
---> <RouterLink>
<MdRipple> at src/components/MdRipple/MdRipple.vue
<MdListItemContent> at src/components/MdList/MdListItem/MdListItemContent.vue
<MdListItemDefault> at src/components/MdList/MdListItem/MdListItemDefault.vue
<MdList> at src/components/MdList/MdList.vue
<MdDrawer> at src/components/MdDrawer/MdDrawer.vue
<AppComponent> at resources/js/components/views/App.vue
<Root>
I am getting a lot of Vue warnings saying $listeners is readonly or $attrs is readonly and related to different Bootstrap items or to .
For example:
[Vue warn]: $attrs is readonly.
found in
---> <BDropdown>
<Display>
<App>
<Root>
I am very sure it has something to do with loading the Vue instance twice somehow, but I don't really know, how to do it any other way, so that the routing still works.
In my main.js the code is as follows:
import Vue from 'vue'
import App from './App'
import router from './router'
import firebase from 'firebase';
import './components/firebaseInit';
import store from './store';
import { i18n } from './plugins/i18n.js'
import BootstrapVue from 'bootstrap-vue'
import VueCarousel from 'vue-carousel';
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.use(BootstrapVue);
Vue.use(VueCarousel);
let app;
firebase.auth().onAuthStateChanged(user => {
if(!app) {
app = new Vue({
el: '#app',
router,
store,
i18n,
components: { App },
template: '<App/>'
})
}
})
My router/index.js code looks as follows:
import Vue from 'vue'
import Router from 'vue-router'
import firebaseApp from '#/components/firebaseInit'
Vue.use(Router)
let router = new Router({
routes: [
{
path: '/',
name: 'display',
component: Display
},
...
]
})
// Nav Guards
router.beforeEach((to, from, next) => {
// check for requiredAuth
if(to.matched.some(record => record.meta.requiresAuth)) {
// check if NOT logged in
...
} else {
// proceed to route
next();
}
} else {
next();
}
})
export default router;
As the sample errors come from Display.vue, here is an extract of that code:
<template>
<div>
<b-row>
<b-input-group prepend="Category">
<b-dropdown v-bind:text="currentCategory">
<b-dropdown-item #click="categroyChanged('All')">All</b-dropdown-item>
<b-dropdown-item v-for="c in categories" v-bind:key="c" #click="categoryChanged(c)">{{c}}</b-dropdown-item>
</b-dropdown>
</b-input-group>
</b-row>
<div class="row" v-for="i in Math.ceil(products.length / 3)" v-bind:key="i">
<div v-for="product in products.slice((i - 1) * 3, i * 3)" v-bind:key="product.id" class="col-md-4 col-6 my-1">
<b-card
v-bind:img-src="product.thumbUrl"
img-fluid
img-alt="image"
overlay>
<div slot="footer">
<small class="text-muted">{{product.name}}<br />{{product.price}} VND</small>
</div>
<router-link v-bind:to="{name: 'view-product', params: {product_id: product.product_id}}" class="secondary-content">
<i class="fa fa-eye"></i>
</router-link>
<router-link v-if="isEmployee" v-bind:to="{name: 'edit-product', params: {product_id: product.product_id}}" class="secondary-content">
<i class="fa fa-pencil"></i>
</router-link>
<button #click='addToCart(product)' class='button is-info'><i class="fa fa-cart-arrow-down"></i></button>
</b-card>
</div>
</div>
</div>
</template>
<script>
import firebaseApp from './firebaseInit'
import { mapActions } from 'vuex'
export default {
name: 'display',
data () {
return {
txtSearch: null,
isLoggedIn: false,
currentUser: false,
isEmployee: false,
products: []
}
},
beforeMount () {
var db = firebaseApp.firestore();
db.collection('products').get().then(querySnapshot => {
querySnapshot.forEach(doc => {
const data = {
'product_id': doc.id,
'article_number': doc.data().article_number,
'barcode': doc.data().barcode,
'category': doc.data().category,
'colour': doc.data().colour,
'description': doc.data().description,
'name': doc.data().name,
'name_ger': doc.data().name_ger,
'price': doc.data().price,
'size': doc.data().size,
'thumbUrl': doc.data().thumbUrl,
}
this.products.push(data)
})
})
}
},
methods: {
...mapActions(['addToCart']),
... many methods ...
}
}
</script>
How can I get rid of these errors?
There are two common reasons why this can happen:
Multiple Vue Locations
This can be due to contradictory locations of where you are importing Vue from, in different files, as others have said. So you might have both import Vue from 'vue' and perhaps import Vue from 'vue.runtime.esm' in your code, for example.
But this can result in multiple instances of Vue, which will cause these errors.
The solution in this case is to use import Vue from 'vue' everywhere in your code, and then alias it in your packaging system (webpack, Parcel, rollup etcetera). An example of this in webpack.config.js, or webpack.renderer.config.js if you're using Electron, would be:
module.exports = {
// ...
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
}
}
// ...
}
See more examples in the Vue documents.
White Listing
This can also be because of a need for Vue to be whitelisted as not one of the externals in webpack, for example.
It is worth noting that changes in Bootstrap Vue from 2.0 to a later version, definitely by 2.15 (and possibly earlier), caused this same problem to occur.
module.exports = {
// ...
externals: [
'fast-glob',
'jquery',
'bunyan',
'yaml',
'vue', // Remove this
'bootstrap-vue', // Remove this
// ...
}
After chasing this for an hour, I realized that a component that I had imported was also accessing Vue. At the top of that file was import Vue from 'vue/dist/vue.esm'. Every other file was simply doing import Vue from 'vue', which was the source of my double-import.
Different javascript packagers have different ways of resolving duplicates. For WebPack, the Resolve Configuration might be helpful in the case of dependencies importing different instances of Vue.
This was my case (https://stackoverflow.com/a/62262296/4202997) but I'll repeat it here to save you time: I was importing vue from a CDN . I simply removed the script and the problem was solved.
In my case the duplicated instances were caused by some Vue plugins importing the Vue instance differently than how I was doing in my project. I managed to fix it by adding the following to my Webpack config:
externals: {
// Stubs out `require('vue')` so it returns `global.Vue`
vue: 'Vue',
},
Hope it can help anyone struggling with the same issue :)
Created a project with monaca / vue2 / onsenui splitter template.
Defined a test method into the main.js file as follow :
import 'onsenui';
import Vue from 'vue';
import VueOnsen from 'vue-onsenui';
// Onsen UI Styling and Icons
require('onsenui/css-components-src/src/onsen-css-components.css');
require('onsenui/css/onsenui.css');
import App from './App.vue';
Vue.use(VueOnsen);
var app = new Vue({
el: '#app',
template: '<app></app>',
components:{App} ,
methods: {
test: function () {
console.log('testing');
}
}
});
then call to method is here on #click into homepage.vue
<template>
<v-ons-page>
<custom-toolbar :title="'Home'" :action="toggleMenu"></custom-toolbar>
<p style="text-align: center">
Welcome home.
<button v-on:click="test">test</button>
</p>
</v-ons-page>
</template>
<script>
import customToolbar from './toolbar'
export default {
props: ['toggleMenu'],
components: { customToolbar }
}
</script>
Its always returning method as undefined, i am missing something...
Project structure :