i'm learning Vue.js and Django.
I want to post user info.
axios response status 200 code, but catch function is called.

If the response is successful, the login 'success dialog' is called , but the login 'fail dialog' is also called.
this image is console log. enter image description here

please help me!

here is my code.

<script>
// LoginDialog.vue
import axios from "axios";
axios.defaults.xsrfCookieName = "csrftoken";
axios.defaults.xsrfHeaderName = "X-CSRFToken";

export default {
  name: "LoginDialog",
  components: {},

  props: {
    dialog: Boolean,
  },

  data() {
    return {
      showPassword: false,
      dialogClose: {
        success: false,
        fail: false,
      },
      me: {},
    };
  },
  setup() {},
  created() {},

  mounted() {},
  unmounted() {},

  computed: {
    dialogOpen: {
      get() {
        return this.dialog;
      },
      set(val) {
        this.$emit("close", val);
      },
    },
  },

  methods: {
    save() {
      console.log("save()...");
      const postData = new FormData(document.getElementById("login-from"));
      axios
        .post("/api/login/", postData)
        .then((res) => {
          console.log("LOGIN POST RES", res);
          // alert(`user ${res.data.username} login OK`);
          this.dialogClose.success = true;
          this.this.me = res.data;
        })
        .catch((err) => {
          console.log("LOGIN POST ERR.RESPONSE", err.response);
          this.dialogClose.fail = true;
          // alert("login FAIL");
        });
    },
  },
};
</script>

// LoginDialog.vue
<template>
  <div>
    <!-- 로그인 dialog -->
    <v-dialog v-model="dialogOpen" max-width="500">
      <v-card width="800" >
        <v-toolbar color="primary" dark flat>
          <v-toolbar-title >
            <h2>Login</h2>
          </v-toolbar-title>
        </v-toolbar>
        <v-card-text>
          <v-form id="login-from" ref="loginForm">
            <v-text-field
              label="Username"
              name="username"
              prepend-icon="mdi-account-circle"
            ></v-text-field>
            <v-text-field
              :type="showPassword ? 'text' : 'password'"
              label="Password"
              name="password"
              prepend-icon="mdi-lock"
              :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
              @click:append="showPassword = !showPassword"
              autocomplete="on"
            ></v-text-field>
          </v-form>
        </v-card-text>
        <v-divider></v-divider>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
            text
            color="grey"
            center
            @click="(dialogOpen = false), $refs.loginForm.reset()"
            >Cancel</v-btn
          >
          <v-btn color="success" center @click="dialogOpen = false"
            >Register</v-btn
          >
          <v-btn color="info" center @click="save()">Login</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>

    <!-- login success 팝업창 -->
    <v-dialog v-model="dialogClose.success" max-width="290">
      <v-card>
        <v-card-title > Login Success! </v-card-title>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
            color="green darken-1"
            text
            @click="dialogClose.success = false"
          >
            Close
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>

    <!-- login fail 팝업창 -->
    <v-dialog v-model="dialogClose.fail" max-width="290">
      <v-card>
        <v-card-title > Login Fail! </v-card-title>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="green darken-1" text @click="dialogClose.fail = false">
            Close
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

CodePudding user response：

So the Axios call goes well, but after that, in the .then block an error is thrown and caught by the .catch block. This is also why the err.response is empty, because that is an error object of Axios. If you log the err instead of err.response you might see the actual error (as Akzhol Kadylbek suggested in his comment).

Looking at your code, I presume that error comes from this line:

this.this.me = res.data;
/// change to this.me = res.data;

The double this. looks like a typo.

Hope this helps.