CODEWITHSUNDEEP
vue.jsaxiosreload
Valentin
Valentin

Reputation: 41

Automatic refresh with specific request - VueJS, Axios

During the development of a single page application in VueJS, I've noticed a strange behavior with two different requests with Axios.

This first request returns a normal result and can be processed as I want it to be. HTTP is only the object created by axios.create

const initGit = {
  das: this.message,
  password: this.password
};
HTTP.post('git/initGit', qs.stringify(initGit), this.config)
  .then(res => {
    console.log(res);
  })
  .catch(err => {
    console.log(err);
  });

This request works like a charm :-)

However, when I replace this first request with the request below.

const body = {
  skill : this.newSkill
};
HTTP.post('git/pushGit', qs.stringify(body), this.config)
  .then(res => {
     console.log(res);
   })
   .catch(err => {
      console.log(err);
   });

It causes a page refresh.

I had this behavior in the method part of my Vue file. I've tried in the watch part as well but the behavior is the same.

I definitely don't understand how one of two requests which work when I check on the network tab in console causes a refresh even before the response of the server.

Please help !!!! :-)

Upvotes: 1

Views: 2708

Answers (2)

Valentin
Valentin

Reputation: 41

YESSSSSSSSSSSSSSSSSSSSSSSSS :-) I finally found the solution !

It was quite clever. In fact, the JSON I was modifying through my backend server app was detected by the webpack server and then my browser was refreshing ^^

I'm stupid :-p

Upvotes: 2

Valentin
Valentin

Reputation: 41

@varit05 This is the template code of my stepper step which includes the call to the watcher to realize the 2 requests.

<v-stepper-content step="3">
                        <v-form onsubmit="return false;">
                            <div class="new-skill-step">
                                <v-text-field
                                        v-model="newSkill"
                                        :rules="[rulesDas.required]"
                                        outline
                                        clearable
                                        label="New Skill"
                                        type="text"
                                        @keyup="isButtonNewSkillEnabled"
                                        @keyup.enter="sendNewSkill = ''"
                                >
                                </v-text-field>
                                <v-btn :disabled="!buttonWriteSkillEnabled" round color="primary" @click="sendNewSkill = ''">
                                    Write new skill
                                </v-btn>
                            </div>
                        </v-form>
                    </v-stepper-content>

Upvotes: 0

Related Questions