I have below two vuejs page. I created filters in my list page like search by user name and email. The filter is working fine, but the issue is when I type something in my search box and search it's working but after that when clicking on the edit user link and after that comes back to the list page the filter is removed and it shows me all data. My question is how can I remember the search I just need suggestions on how can I achieve that.
localstorage or vuex possible solution for that?
1. List of users
2. Edit User
The solution is to save the filter in a vuex state that way it doesnt change when u go back as long as you're still in the same tab and didnt close it.
If you don't refresh the page and navigate between the route's components, it's best to use Vuex, and on the other hand, if you want the same search results to be stored and retrieved even after refreshing the page, use the localStorage.
Furthermore, Vuex would be good to store large lists of data instead of localStorage.
Related
I have a Vue 2 app that I'm working on and it kind of works like a search engine - I have a search bar where I can look up any term and when the search runs, results containing that specific term will be displayed.
Now, every result behaves like a link - if I click on it, I will be redirected to a totally different app, which is made in Angular (not sure if this is relevant, I guess you could think only that I navigate to a whole different domain and leave my Vue app).
The issue is that if I click the "back" button in my browser, I will not have the results that I left from, because once I leave my Vue app, its data is deleted.
I was thinking of storing the url containing the search term in local storage and get it when I open the Vue app again, but I don't think this is an option, as it would also behave like this if I refresh the page - moment when I want to have no search query at all.
Please ask for any clarifications needed.
Any suggestions on what could be done are appreciated.
I have a form with a dropdown list of country options like so:
When the user selects an option, the form will load some data from an API so the user can make changes. However, some parts of the form have some deeply nested components where the user can edit additional data on a separate page. The problem is that when the user changes navigation and then clicks the back button on the browser, the drop down list is 'reset' and he has to select again the country that he was editing.
Can someone suggest a way to handle this issue so that if user clicks the back button on his browser (or the page has a "back to results link"), he will go back to the form and it will already be pre-selected with his option?
Should I be handling this via $route.query, localstorage, vuex? I would prefer not to use Vuex but I guess I can if needed.
Is $router query all i need here? I can capture the country's id and run the API call again on navigation back to the drop down selection page?
Example data from API:
{
id: 1,
name: 'Afghanistan'
}
When user selects a country from menu, I run an API get request like so:
async setSelectedCountryObj(value) {
if (value) {
const response = await APIService.tempISOCountryById(value.code)
....snip...
it's possible to handle with router, but that not a good way, you should go with vuex, that best way, just create store, and dispatch after select value, and always get value when come on that component, that essay not that much difficult, let me know if you need but i know you can.
I have a page with a search form and I use vuetify's data-table for the search results, which can be sorted by columns.
If I click on an item in the table, I'm forwarded to that item's edit page. Then, if I click on the back button (this.$route.go(-1)) all the search terms, search results and sorting is gone and I have to do the same search again.
So the question is, how do I retain all the results and sorting selection in the data table?
I guess I can use localStorage with the search form input values?
You could use the localStorage indeed with :value or use and implement the Vuex to centralise your data source.
This would make your data persistent to navigation but not to hard refresh as local storage would.
I ended up using vuex module for storing search form input and url for storing column sorting data. So when I go back, I can fill the form from the vuex store and set sorting from the route query.
We are developing an app which will display a button on product details page to perform some actions. We are using product.metaifields for displaying the same based on a condition. So basically the button display toggles depending upon the metafield value.
The issue we are facing is, activate the feature from admin section and then the button will not show up on the user side unless we do a hard refresh on the browser. What happens here is Shopify caches the metafield value so the condition checking will not work.
Is there any way to remove the page caching while we perform some action on the app?
When you render a page in Shopify, it renders everything including the metafield resource values you may access while rendering. There is no special caching of a metafield value. If you render a metafield "AAA" on a client-facing page, change the metafield using an App or the Admin to be "BBB" there is no signal to the already rendered page to redraw anything.
If you want dynamic behaviour, like rendering a button with a value based on a metafield resource, you will have to either do a callback to an App, get the new contents, and update the DOM, or use a push strategy like WSS:// to keep a channel open to a backend that monitors these things.
So to sum up, your problem is not one of cached data, but instead the fact that you're rendering a non-dynamic value, and expecting your UX to be dynamic.
I have a SPA built in Vue.js that lets the user input several values to create something like a recipe. All these values are stored in Vuex state. I would like to be able to create a URL using the state values that the user entered so that another user can load the app with those values already entered. Essentially I want to allow users to share the recipes they created in my app by sharing a URL.
I'm imagining a "share" button which will copy the created URL to the user's clipboard which they can then post on social media or whatever. Then when someone visits the link, they will go to my app and the vuex state values will automatically be updated to the parameter values found in the URL.
What is the best way to achieve this functionality? Is this something that is possible with vue-router?
Use the $route.query property provided by vue-router.
Pass in a parameters through your URL like http://example.com/#/?amount=10 and access them with this.$route.query.amount.
Update your vuex store in the main component's mounted() method.
Official Documentation for the Route object
If I understand you correctly the vue-router should do exactly that.
have a look at the documentation where they send the user id. You can pass as many parameters as you like.
https://router.vuejs.org/en/essentials/dynamic-matching.html
note: you may consider rebuilding application paths using the router.