I have a template with two components - a filter and a request to the API. I am wondering if it's possible to update the values of the request component after submitting the filter.
On the main page, the request component has default values. When a user applies a filter, the request should reflect the new values entered by the user.
<template>
<app-filter></app-filter>
<app-request :time="time" :keyword=keyword />
</template>
<script>
export default {
components:{
"app-request": Request,
"app-filter": Filter
},
data() {
return {
keyword: "Hello",
time:"today",
}
}
}
</script>
The filter component will update the default values of keyword and time.
<template>
<form @submit.prevent="submit">
<input v-model="keyword" class="input" type="text">
<input v-model="time" class="input" type="text">
<button type="submit">send</button>
</form>
</template>
<script>
export default {
data() {
return {
time:"",
keyword: "",
}
},
methods:{
submit(){
//what should I do here to update the value in the request?
}
},
}
</script>
The request component will display the values from the API, receiving props from the main page.
<template>
<div :time="time"></div>
</template>
<script>
export default {
props:[
'keywords',
'time',
],
create(){
//make a request to api goes here
}
}
</script>
Is there a way to refresh the main page after submitting the form in the filter component?