類型錯誤：無法讀取未定義的屬性（讀取“輸入”），Vue

Question

我正在嘗試使用我的 API 訪問一個，當我嘗試使用 VUE 的 Postman 時它可以工作，但由於某種原因我收到錯誤“TypeError：無法讀取未定義的屬性（讀取'輸入'）”。

發送帖子時的正文是這樣的：

郵寄：http://localhost:8080/api/vendedor/login

{
  "correo": "l.andrade01@ufromail.cl",
  "password": "123456"
}

POST 的答案將是 JSON，其中：

{
  "idvendedor": 5,
  "nombre": "Leonardo",
  "apellido": "Andrade",
  "correo": "l.andrade01@ufromail.cl",
  "password": "123456",
  "lugartrabajo": "Casino Los Notros"
}

來自登錄的 HTML 將是這樣的：

<form class="w-96 mx-auto rounded-md">
            <div class="input">
                <label for="email" class="text-xl font-medium text- flex justify-left py-1">Correo</label>
                <input type="text" name="email" v-model="input.email" placeholder="emailejemplo@ufromail.cl" class="border-2 p-1 w-96 border-violet-700 rounded-full">
            </div>
            <div class="input">
                <label for="password" class="text-xl font-medium text- flex justify-left py-1">Contraseña</label>
                <input type="password" name="password" v-model="input.password" placeholder="***************************" class="border-2 p-1 w-96 border-violet-700 rounded-full">
            </div>
            <div class="pb-5"></div>
            <button type="submit" id="botonlogin" v-on:click.prevent="login()" class="ml-28 h-8 w-36 mx-auto bg-gradient-to-r from-indigo-500 to-indigo-700 rounded-full hover:from-indigo-400 hover:to-indigo-600">
                <span class="text-center text-white font-medium">Iniciar Sesión</span>
            </button>
        </form>

這是登錄中的腳本：

<script>
import axios from 'axios';

  export default {
    name: 'Login',
    data() {
      return {
        input: {
          email: "",
          password: ""
        },
        vendedor: {
          idvendedor: "",
          nombre: "",
          apellido: "",
          correo: "",
          password: "",
          lugartrabajo: ""
        },
      }
    },
    methods: {
      async login() {
        try{
          let res = await axios.post('http://localhost:8080/api/vendedor/login', this.data.input);
          console.log(res);
          if(this.input.email == this.vendedor.correo && this.input.password == this.vendedor.password){
            this.$router.push('/vendedor/homeVender');
          }
        }catch (e){
          console.log(e)
        }
        
          
      }
    }
  }
</script>

我希望從 axios 得到 JSON，這樣我就可以為登錄做一個“如果”，但我收到錯誤“類型錯誤：無法讀取未定義的屬性（讀取‘輸入’）”

Answer 1

您看到的錯誤是因為您試圖在登錄方法中訪問數據 object 的輸入屬性，但 Vue 組件中沒有數據屬性。 要修復錯誤，只需在登錄方法中將 this.data.input 替換為 this.input 即可：

*methods: {
  async login() {
    try {
      let res = await axios.post('http://localhost:8080/api/vendedor/login', this.input);
      console.log(res);
      if (this.input.email == this.vendedor.correo && this.input.password == this.vendedor.password) {
        this.$router.push('/vendedor/homeVender');
      }
    } catch (e) {
      console.log(e);
    }
  }
}*