Level 60
Dec 10, 2022
11
Level 4
Vue js2 How to use mixins with axios request?
How can i import a method from an external file on vue js and to use mehods from there, but with different axios call?
For example: I have a vue js 2 & laravel web app and i use axios to fetch data from backend like this
UserComponent.vue
methods: {
getData() {
this.$Progress.start()
this.loading = true
axios.get('/admin/users/getusers',
{
params: {
'&page': this.pagination.current_page,
'&perPage': this.displayRecord,
}
})
.then(response => {
this.users = response.data.data
this.pagination = response.data.meta
this.loading = false
this.$Progress.finish()
// console.log(response)
})
},
}
Is there any option i can export this method on another file
Functions.vue
methods: {
getData() {
this.$Progress.start()
this.loading = true
axios.get('This need to pass from parent',
{
params: {
'&page': this.pagination.current_page,
'&perPage': this.displayRecord,
'&filterName': this.filterName
}
})
.then(response => {
this.users = response.data.data
this.pagination = response.data.meta
this.loading = false
this.$Progress.finish()
// console.log(response)
})
},
}
and to call this file on my UserComponent.vue but with diferent axios url. For each component to use different url. Like props on vue template?
Level 4
@Sergiu17 I mean, i now how to use mixins for reusable functionality who have same parametter. But does not know how to pass different axios url for different component on this mixins i will create in my case to get uersdata
Level 28
You could create a mixin and put this.dataUrl (name is up to you) in your axios.get(...). Then in the components that use this mixin, add a data property named dataUrl (or the name you chose) with the proper URL that you want your axios.get(...) to call.
Level 4
@piljac1 can you do an example with mu case?
Level 28
@Leon012 It's a very simplified example because I don't have access to your API or your entire code (including loading logic, pagination logic and filters logic), but it should put you on the right track.
https://codesandbox.io/s/jovial-swanson-ftctj2?file=/src/App.vue
Level 4
@piljac1 Yes this work. But have a small problem , does not show the pagination. I have done something like this
InteractWithIndexRoute.js
import axios from "axios";
export default {
data() {
return {
displayRecord: 5,
pagination: {
current_page: 1,
},
filterName: '',
}
},
methods: {
getData() {
axios.get(this.indexUrl, {
params: {
'&page': this.pagination.current_page,
'&perPage': this.displayRecord,
'&filterName': this.filterName
}
})
.then(response => {
this[this.indexDataKey] = response.data.data;
// this.users = response.data.data
this.pagination = response.data.meta
// console.log(response)
})
},
},
}
UserComponent.vue
data() {
return {
displayRecord: 5,
pagination: {
current_page: 1,
},
perPage: {
"10": "10",
"50": "50",
"100": "100",
"500": "500",
},
indexUrl:'/admin/users/getusers',
indexDataKey: "users",
...
}
},
mixins: [InteractWithIndexRoute],
//this is the paginate on table footer
<div class="table-extra-pagination d-flex justify-content-between py-4">
<div class="">
<p> Showing {{pagination.current_page}} - {{displayRecord}} of {{pagination.total}} entires </p>
</div>
<div class="">
<pagination v-if="pagination.last_page > 1" :pagination="pagination" :offset="5" @paginate="query === '' ? getUsers() : searchUsers()" ></pagination>
</div>
</div>
Level 28
@Leon012 Can you console.log(response.data.meta) and show the output here please?
Level 4
@piljac1 Of course. This is the response
{current_page: 1, from: 1, last_page: 1, links: Array(3), path: 'http://127.0.0.1:8000/admin/users/get-users', …}
current_page: 1
from: 1
last_page: 1
links: Array(3)
path: "http://127.0.0.1:8000/admin/users/get-users"
per_page: 15 // THIS SHOULT BE 5
to: 6
total: 6
per_page: 15 should be 5
And if i remove & from axios it works
axios.get(this.indexUrl , {
params: {
// '&perPage': this.displayRecord,
// '&page': this.pagination.current_page
'perPage': this.displayRecord,
'page': this.pagination.current_page
}
})
Level 28
@Leon012 Right, I completely missed that you added ampersands lol. Glad that it works now :)
Level 4
@piljac1 it works now thank you :), but just does not understand why is not working when i add this symbol&?
Level 28
@Leon012 Because Axios handles query string separators (? and &) for you between the parameters you specify.
1 like
Please or to participate in this conversation.