In my controller I define
PagesController.before('*', function(next) {
console.log('zip');
next();
});
And in routes.js I have
this.resources('pages', { only: [ 'index'] })
The "before" filter wasn't being executed. It looks like the code in the controller is being executed before the resources call, and so at the time the before filter is set up the array of actions is empty. Is this expected, and if so where should the before filter be specified (and would it be worth a warning in the docs). Or is this unexpected, in which case any suggestions for why this is happening?
Make sure your filter is at the bottom of your controller. :)
Related
After I reload the page I can't get console.log inside of the method, which means it is not getting executed, but after I make change in VSC and save it, the method executes.
I would like to add note that I have show/hide modal for the form where I try to pre-fill the values, does that makes problem? I tried removing the toggle and the result was the same.
Pls see screenshots
Some code below:
created() {
this.loadStationList();
this.loadStationGroups();
this.loadAllButtons();
this.loadAllQuidos();
this.pushButtonIds(); <---- I Try to execute this method on created but it gets executed after VS code change
},
pushButtonIds() {
for (const buttonId in this.filteredButtonList) {
this.stationButtons.push({
buttonId: this.filteredButtonList[buttonId].buttonListId,
quidoId: null,
input: null,
});
console.log(this.stationButtons);
console.log("Hello from component after saving change in VSC");
}
},
I tried to add the method to execute on beforeCreated but no success.
Just from the name, without knowing exactly, where filteredButtonList comes from, it looks to me that you call this function too early. Accessing DOM elements should take place when everything is actually in the DOM. Try moving the call into beforeMount() or even mounted(). https://vuejs.org/guide/essentials/lifecycle.html
i have a button in my project when i click on it two queries added to URL
onClickBtn(){
this.$router.push({queries: {name:'kevin' , age:21} })
}
and I have a watch on $route
watch:{
$route:function(){
// call API
}
}
and when i click on that button severall time
watch calls my API every time although nothing has changed
and this make a problem form me
because nothing has changed in route But API is called and the same data is
received .
what should I do to avoid calling API in watch , when queries don't changed ??
The object you are pushing on the router is always different, that's why the $route watch is launched.
You can compare the data you receive in the watch, so that when they are different then you invoke the API:
watch:{
'$route' (newRoute, lastRoute){
// Check if query is different
// call API
}
}
On top of the answer that Cristian provided, you could also even double-check if your stuff has changed before even pushing a new object to your router.
Like this
checkIfUpdateNeeded && this.$router.push({queries: {name: 'kevin', age:21 } })
That way, you will have less moving parts and you won't have a trigger in the watcher for "nothing", especially if you're pushing a bigger object and want to make a deep-diff between 2 objects.
I have a single page dashboard application. I've been playing around with setInterval which works quite well for just updating the data without reloading the page. I put the setInterval function within mounted(), not sure if it best belongs there but works okay.
However! This SPA has a ton of filters. You can search, you can select dropdowns, you can sort, on and on. Say the initial page load has 1000 rows and you use the search bar to narrow it down to one row/one result. Now setInterval runs and it will re render all 1000 rows. This is the method (defined in methods: {} section that initially loads the data and the method used in mounted() with setInterval):
getData: function (arg1, arg2) {
API.getSomeData(arg1, arg2).then(resp => {
getTicketData(resp.data);
this.$data.loading = false;
});
}
Is there a way to account for the filters when it comes to the setInterval piece?
Any and all insight is appreciated.
It sounds like you might be overwriting the same data property when you fetch data from the API and when you filter on it. If that's the case, you should use a computed property to display the filtered records to the user instead.
computed: {
tableRows() {
if (this.filters)
return this.filter()
return this.apiData
}
Where this.filter() will filter down this.apiData without overwriting its contents. Then you can iterate over tableRows in your template (e.g. v-for="row in tableRows") to display those to the user.
If you want to remove some of this logic from your Vue component, you might consider using a Vuex store to both fetch/update from your API and also to calculate the filters.
this.$store.dispatch('fetch_on_interval', { interval: 1000 })
this.$store.dispatch('set_filters', { ...filters })
this.$store.getters('table_data')
Your getter would check the filters and return whatever is relevant. Vuex getters can be used in computed properties too.
currently have query param id=2&p=3
want to change this with vue-router
tried :
this.$router.push({query:{id:'2',p:'4'}});
but throws NavigationDuplicated
weird ..
how to change just the query, to trigger watch.
The error will be thrown only if your params the same, so you could just check your params before push or replace. Also, you could use async/await or then/catch with there methods, here is an example:
try {
if (/* id or p have been changed in this.$route.query */) {
await this.$router.push({query:{id:'2',p:'4'}});
}
} catch (err) {
...
}
I had the same issue of getting a "NavigationDuplicated" error on adjusting my query. In my case the problem was because on page load I was naively getting the query object directly from the router. I loaded it like:
beforeRouteEnter (to, from, next) {
store.dispatch('setQuery', to.query);
next();
}
where setQuery would set my vuex store variable query.
The issue is then that this object just points to the query inside the route object, and making changes to it changes directly route.query but the url doesn't react to this change. If you then do something like:
watch: {
query (query) {
this.$router.push({query: query})
}
}
you will get a "NavigationDuplicated" error as the new "query" will be identical to the old "query" since you are just passing the pointer to the original object.
To avoid this issue you can do some sort of deep copy (e.g. JSON.parse(JSON.stringify(to.query))) to make sure you are not directly modifying the route.query when you adjust the query.
if you create button and want to router push, just convert those button to <router-link :to="routeObject" />. Router-link will not react if destination route = current route, so it won't show error navigationDuplicate
note:
routeObject : {
path : '/search',
query : {}
}
The nice thing about beforeRouteLeave is that you can prevent navigating away under certain conditions.
I have a setup that uses a subroute to render part of the page. I would like a navigation guard on the subroute to prevent switching to another one if the data is not saved.
{
path: '/customers/view',
component: ViewCustomerShell,
children: [
{path: ':id', name: 'ViewCustomer', component: ViewCustomer}
]
},
So when I visit /customers/view/12 and make a change, if they try to load /customers/view/13, I want to pop up the usual confirmation and potentially stop navigation. Since beforeRouteLeave is not called in this situation, what is the recommended approach for preventing navigation? It seems that watching $route would be too late, because then the navigation has already occurred.
Note: As mentioned above, beforeRouteLeave is not called in this situation; it doesn't work.
Note: Using onbeforeunload doesn't work because it only triggers when the entire page changes.
I have also posted the same answer here.
Dynamic route matching is specifically designed to make different paths or URLs map to the same route or component. Therefor, changing the argument does not technically count as leaving (or changing) the route, therefor beforeRouteLeave rightly does not get fired.
However, I suggest that one can make the component corresponding to the route responsible for detecting changes in the argument. Basically, whenever the argument changes, record the change then reverse it (hopefully reversal will be fast enough that it gets unnoticed by the user), then ask for confirmation. If user confirms the change, then use your record to "unreverse" the change, but if the user does not confirm, then keep things as they are (do not reverse the reverse).
I have not tested this personally and therefor I do not gurantee it to work, but hopefully it would have cleared up any confusion as to which part of the app is responsible for checking what change.
I know that this post is very old. but it was the first one I found when looking for the same problem.
I have no idea if there is a better solution nowadays but for those who are looking for a solution, I can share mine:
1. Define a global state
let isRouteChangeBlocked: boolean = false;
export function blockRouteChange(set?: boolean): boolean {
if (arguments.length == 1) {
isRouteChangeBlocked = !!set;
return isRouteChangeBlocked;
}
return isRouteChangeBlocked;
}
2. Replace the route function
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function(location: RawLocation) {
if (blockRouteChange()) {
if (confirm("Du hast ungespeicherte Änderungen, möchtest du fortfahren?")) {
blockRouteChange(false);
return originalPush.call(this, location) as any;
}
return;
}
return originalPush.call(this, location) as any;
};
3. Set the state
#Watch("note.text")
private noteTextChanged() {
blockRouteChange(true);
}
This does exactly what I want. If nowadays there is a better solution, let me know. You can get the full runnable example here: https://github.com/gabbersepp/dev.to-posts/tree/master/blog-posts/vuejs-avoid-routes/code/example
You could use a $route object inside your component to watch if it changes and then raise up the confirmation modal... This will get called whenever your route changes!
const Baz = {
data () {
return { saved: false }
},
template: `
<div>
<p>baz ({{ saved ? 'saved' : 'not saved' }})<p>
<button #click="saved = true">save</button>
</div>
`,
watch: {
'$route': function () {
if (this.saved || window.confirm('Not saved, are you sure you want to navigate away?')) {
// do something ...
}
}
}