I need to make a pokemon game using pokeapi. And there must be pagination for next and previuos button.
The next page's data from this source(data.next). I'm using Vuex for store, and how can I call the next button and load next page? Should I make another axios request and create an action for that? Any help would be appreciated
next page has a new result so you should call another api for it and replace it with existing value inside your store with commiting the same mutation. As for your actions, if your URl accepts :page or something inside URL for page variable, just pass the page dynamically to it, forexample: url = pokeapi.co/${page} :
myAction(page) {
const url = `pokeapi.co/${page}`;
axios.get(url)}
. On the other hand if its not accepting any page variable and its completely new url, make url dynamic and send it to the action like bellow:
myAction(url) {
axios.get(url)}
In the example you shared as response, your next page has another complete url so use the second snippet as for your action.
Related
I have a vue component to delete items. function working fine.but that deleted items is remain the page until I press the reload in web browser. Following is the delete method in vue component.
deletedItem: function () {
let data = {
"_method" : 'delete',
}
axios.post('/delete-item' +this.id, data);
this.isDelete =false;
location.reload();
}
-Delete button
<button v-on:click="deletedItem" class="bg-red-500 text-gray-200 rounded hover:bg-red-400 px-6 py-2 focus:outline-none mx-1"> Delete</button>
Is there are anyway to remove deleted item once I click delete button.
Once I reload the page after the response came then it reload the page & remove deleted item. solution is as follows.
axios.post('/delete-item' +this.id, data).then( response => {
this.isDelete =false
location.reload()
});
As i understand it you have all the items stored remotely on a server somewhere else, and the way you fetch the items is by some other request. And what you are doing here is deleting the item on the server without doing anything else.
I don't see how the web-application would know that the item got deleted. Normally I solve this situation with deleting the object locally after i receive a 200 from the api.
If you want something even more simple you could just refresh the list of items after you receive a response of any kind. It all depends on what kind of features you want to have.
Please confirm the points below:
Did your api responded with a successful response?
Did you declare isDelete property in data function?
You should change the isDelete property after the ajax finished using promise or async/await because ajax is asynchoronous at the most time.And you should declare the isDelete property in data function like this:
data () {
return { isDelete: true }
}
because it makes Vue be able to collect the dependency relation and make it responsive.
My vue page contains Created, mounted, updated, destroyed hooks. I need to add a condition for page rendering. In my case, in the created hook I make a variable true or false based on a confirm alert and if it true I would like the vue to execute other lifecycle hooks else route to a different page.
Is it possible with vue to do this, if yes, how?
In your created hook if this value is false and you want to redirect to different page you can use location API.
//...
created: function () {
// your code
window.location.replace("https://google.com"); // this will redirect you to another page
}
//...
I am working on an application using React with Redux Observable.
I have a react Component which builds a seachCriteria object taking inputs from users (Dropdown, date picker).
On Click of a button I call a service which is part of an Epic.
I want to pass this search Criteria Object as a body parameter in my fetch request.
What's the best way to do that. Since epic takes an action and a store, shall I add that search criteria object as a part of store (my state object) ?
On Click of a button I call a service which is part of an Epic. I want to pass this search Criteria Object as a body parameter in my fetch request.
Since redux-observable plugs into redux, you should be dispatching an action rather than calling a service directly.
By doing that you could add your search criteria to the action payload and your epic would look like:
const searchEpic = action$ => action$.pipe(
ofType('search'),
pluck('payload'),
map(toQueryString),
mergeMap(query => fetch(`api.something.com/search?${query}`)),
mergeMap(result => result.json()),
map(data => ({ type: 'search resolved', payload: data })),
);
I'm working on a tab view app with VueJS and Framework7.
I have f7-links that each open a f7-view element (so not actual tab elements). Inside one of these tabs, I would want to do nested navigation using f7-link-item with the link parameter. I am using the same component to render this page but I need to pass data to each link to identify which link was clicked (and to know which content to render).
I am trying to get this data with
created() {
console.log(this.$f7router.currentRoute);
}
But the weird thing is, this shows the previous route (the component that the link was clicked on, not the current component). If I do just
created() {
console.log(this.$f7router);
}
THEN the currentRoute shows the correct one.
For reference, my ordinary tab links are like this:
<f7-toolbar tabbar labels bottom id="toolbar">
<f7-link tab-link="#view-menu" tab-link-active text="Menu"></f7-link>
</f7-toolbar>
<f7-view id="view-menu" main tab tab-active url="/menu/"></f7-view>
And my nested routing links are like this:
<f7-list-item link="/product/0" class="product-link">
Coffee
</f7-list-item>
Routing itself works great, I just don't understand how to pass the prop I want and why the currentRoute parameter isn't working.
Thank you very much!
Try using this.$f7route instead of this.$f7router.currentRoute.
$route or $f7route
(object)
Current route. Contains object with route query, hash, params, path and url
https://framework7.io/docs/router-component.html#component-context
How can a parameter from an URL be read within an AngularJS controller?
Let's say I have an URL like http://localhost/var/:value and I want the value to be stored in a variable within the controller for the /var/:value URL.
I have tried using $routeParams.value and $route.current.params.value but $routeParams is undefined at the beginning and $route doesn't work.
The problem is that you probably inject $routeParams or $route in a controller that is run before a route change has occurred, e.g. your main/master/page controller.
If you inject $routeParams in a controller for a specific route (specified by the controller property when you define the route), then it will work, otherwise you're probably better of listening to the various events the route service broadcasts.
Try to change your code to use
$scope.$on('$routeChangeSuccess', function (ev, current, prev) {
// ...
});
Requirements: Ensure 'ngRoute' is in your app module
Route provider set up as: http://localhost/var/:valName
Function set up as:
function functionName($scope, $routeParams){$scope.value = $routeParams.valName;}
HTML view:
{{value['valName']}}