My vue component like this :
<template>
<span class="rating">
...
</span>
</template>
<script>
export default {
props: {
'star': null
},
...
}
</script>
If the component is running I want to disable button back in the browser. So the user can not go back to the previous page
How can I do it?
Try this script, by adding in your html file, where you creat vue instance
history.pushState(null, null, location.href);
window.onpopstate = function () {
history.go(1);
};
Run this code whenever url changes. It will counteract user's back action
window.history.forward(1)
Related
Nuxt 2.15.6; I want to switch the layout of my menu component by dynamically switching menu components in my root layout.
default.vue
<template>
<component :is="navLayout"></component>
<Nuxt :navLayout="navLayout = $event" />
</template>
data() {
return {
navLayout: "default"
};
},
In the "child" components of , my pages eg. login.vue (/login) I $emit an event;
...
import nav2 from "#/layouts/nav2";
...
created() {
this.$emit("navLayout", nav2);
},
Now it seems to be the <Nuxt> component is not able to catch the event. I also tried calling a <Nuxt #navLayout="test()" /> method.
How can I avoid this.$root.$emit(...); in my login.vue and
this.$root.$on("navLayout", navLayout => {
this.navLayout = navLayout;
});
in default.vue?
EDIT: This answer works fine as it looks like you cannot do it right now: https://github.com/nuxt/nuxt.js/issues/8122#issuecomment-709443008
In the child component
<button #click="$nuxt.$emit('eventName', 'nice payload')">nice</button>
On the default layout
<script>
export default {
created() {
this.$nuxt.$on('eventName', ($event) => this.test($event))
},
methods: {
test(e) {
console.log('test ok >>', e)
},
},
}
</script>
Putting a listener on Nuxt itself does not work.
<Nuxt #navLayout="navLayout = $event" :navLayout="navLayout" />
I can see the event go and the listener plugged to <nuxt></nuxt> but it does not trigger any method with the listener...
PS: works for <nuxt-child></nuxt-child> at least.
Maybe I don't understand your question correctly, but it seems to me that you are trying to do yourself what layouts are meant to do. This would mean that you would create a layout with the menu component for login, a default layout etc. like this:
login.vue
<template>
<LoginMenu>
<Nuxt/>
</template>
default.vue
<template>
<DefaultMenu>
<Nuxt/>
</template>
On your page you would do:
export default {
layout: login
}
And then that would load the layout with the login menu component. On all other pages it would load the default menu.
More info here: https://nuxtjs.org/examples/layouts/
Here is my progress bar from Vue bootstrap components, you can set default number in data with value: number, I want it to increase it automatically whenever I go to next page. Can anyone assist me with this? I tried with props but I have no idea how to do it.
b-progress(:value='value', :max='max', show-progress='', animated='')
b-button.next.mt-3.pb-1(v-if="nextLink" :to="{name: nextLink}")
RegistrationNav(prev-link="registration_goal" next-link="registration_interview")
For a basic example, without using vue lets imagine this way:
You have a parent component that includes the b-progress and some other component or inout for the user:
<template>
<div>
<b-progress :value="currentValue"><b-progress/>
<button #click="currentValue++">Click to increment </button>
</div>
</template>
export default {
name: "Login.vue",
data() {
return {
currentValue: 1
}
}
}
I have a modal code in one component which i am using in the page, everything works fine but if I refresh the page than mounted hook called twice which is breaking my code. I want it to called only once.
import axios from '~/plugins/axios';
export default {
data() {
return {}
};
},
components: {
LoginSignupModal
},
mounted() {
console.log('mounted called......');
},
<template>
<div>
<p>
<LoginSignupModal :isModalOpen='isModalOpen' v-on:onModalClose="onModalClose($event)"></LoginSignupModal>
</p>
</div>
</template>
You cannot paste div into paragraph.
Remove <p> and it should work.
I've been trying to solve this mystery for a week now.
I'm trying to set up a sidebar with Vuetify in my Nuxt/Vue website where people click on the hamburger menu and the sidebar opens up. To do this I set up the hamburger menu to run a toggle method.
<v-app-bar-nav-icon #click="toggleSidebar"></v-app-bar-nav-icon>
......
<script>
import { mapMutations } from 'vuex';
export default {
methods: {
...mapMutations({
toggleSidebar: 'appSidebar/toggleSidebar'
})
}
}
</script>
The method then update vuex state
export const state = () => ({
sidebarOpen: false
})
export const mutations = {
toggleSidebar(state) {
state.sidebarOpen = !state.sidebarOpen;
},
}
This works fine. The bar opens and close when I click on the hamburger menu. However, for some reason, which I'm glad it does, the sidebar closes when I click outside the sidebar (if anyone could explain how this works too i'd be appreciated). When this happens, the state doesn't update and the next time i want to open i need to click on the menu twice to get it back to close then open again.
This is how i set up the sidebar
<v-app>
<v-navigation-drawer app temporary clipped v-model="status" color="blue lighten-3" dark>
<script>
export default {
computed: {
status (){
return this.$store.state.appSidebar.sidebarOpen
}
}
}
</script>
Thank you for your help!
The drawer closes when you click outside because of the temporary prop. According to your code, your state changes only on clicking the hamburger button. But internally vuetify uses the temporary property. You can either do without your vuex code or without the temporary prop.
I have a Vue component that lists a bunch of clickable tags. When you click on a tag, it takes you to another page with a list of objects containing that tag.
The relevant parts of the component code are:
<template>
<div>
<h2>All Tags</h2>
<TagList v-bind:tags="tags"/>
</div>
</template>
...
<script>
import TagList from './TagList'
export default {
name: 'AllTags',
components: {
TagList
},
data () {
return {
tags: []
}
},
mounted () {
tags = // array loaded from a database
}
}
</script>
This all works fine when I initially view the page. However if I browse away from this list, e.g. by clicking on a single tag, and then browse back, I only see the <h2>All Tags</h2> header. Using the Vue debugger in the browser, I can see that the data are still there.
I'm using <router-view :key="$route.fullPath"> to control the overall app and suspect the problem lies with the keys somehow.
Can someone point me in the right direction here? How can I get the TagList component to render every time I visit that page of the app?
EDIT: Here's the code of the TagList component:
<template>
<div class="tags">
<Tag v-for="tag in tags" v-bind:tag="tag" v-bind:key="tag" />
</div>
</template>
<script>
import Tag from './Tag'
export default {
name: 'TagList',
props: ['tags'],
components: {
Tag
}
}
</script>
You can try removing v-bind all thought its not required to use, I've checked your code it seems to work fine after visiting a tag and going back, all tags are still rendered. You can take a look at this working sample .
https://codesandbox.io/s/vue-template-3tcs4?fontsize=14