How to refresh the page after submit form?

Question

I have two components in a template, the first is a filter and the second makes a request to the API. I would like to know if I can refresh the values of the second component (request) after submit the first (filter)

in main page the request have default value, and if the user use a filter, the request have to change to value that user insert

<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 will change the default value 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 i do here to change the value in request?
        }
    },
}
</script>

The request will show the values from API, the request page will receive props from the main page

<template>
<div :time="time"></div>
</template>

<script>
export default {
  props:[
        'keywords',
        'time',
  ],
  create(){
    //make a request to api, here is ok
  }
}
</script>

How to refresh the main page after submit form in filter component?

Use window.location.reload() in your submission callback. Assuming it's a fetch/axios call, you would place that in the then callback of your promise. Having said that, you shouldn't have to refresh the page to update the values of the other component. It would be better to control this behavior via your store with something like VueX. Alternatively, I think that your case is simple enough to where you can just do this.time = apiCallResponse.time or whatever your structure looks like. — Evan Bechtol
how can i change the data that i send to request? cuz i do it in created — sadjapa

brettvd brettvd · Accepted Answer · 2020-03-16T18:48:34

One simple way to do this is to have the parent handle the communication with some events.

In the parent:

<app-filter @applied="filtersApplied"></app-filter>

and

methods: {
  filtersApplied (filters) {
    this.keyword = filters.keyword
    this.time = filters.time
  }
}

And in the AppFilter component:

submit () {
  this.$emit('applied', { keyword: this.keyword, time: this.time })
}

EDIT I noticed you're talking about how you're doing the call in created(). There's a couple solutions to that as well.

You can use sub-component/nested routing, so on submit you add them as query parameters to the URL which will cause the component to re-load and created() will be called again. Check out nested routing in the Router api here
You can use watchers. Since you want to know if either changes, you'll probably want to watch a computed property which includes them both. In the AppRequest component put:computed: { combined() { this.keywords && this.time} } and watch: { combined() { makeApiRequest() } }

How to refresh the page after submit form?

1 Answers