I need to reload the page whenever different buttons are pressed, while sending a String to the same page so that on created() it takes that String and sends an HTTP Get into my Database.
Currently I have the following:
export default {
data(){
return{
events: [],
formData:{
sportType: 'Ténis'
}
}
},
created(){
//Do something here to get the value sent from the reloading
axios.get(`http://localhost:8001/evento`, {headers: {sportType: this.formData.sportType}})
.then((response)=>{
this.events = response.events
},(error) =>{
console.log(error);
});
},
pickSport(item){
}
The function pickSport() is called whenever the buttons are pressed and each sends a value to this function that is a String. The idea now is to be able to reload the page when this function is called, while sending this item to the reloaded page, so I can update the value of sportType. I tried:
pickDesporto(item){
this.$router.push({
path: '/betting',
params: item
});
}
But with no success, since it keeps giving me a NavigationDuplicated error. How can I solve this?
They are many way to do this. You may want to use Watch: {} to keep track of certain parameter. It will be trigger once the parameter change and you can re-render the same page with new parameter. There is also a way called key-binding but it need to bind the key to the component. I personally suggest this one because it will be easy to understand.