在 Vue 3 中使用 axios.post 的正确方法是什么？

Question

我正在尝试让axios.post 以laravel 8 作为后端在vue 3 中工作，但我得到了POST http://localhost:3000/contact 500 (Internal Server Error)。

这是我的vue component（没有css）：

<template>
  <section class="contact">
    <form @submit.prevent="storeContact">
      <input type="text" placeholder="Name" v-model="name">
      <input type="text" placeholder="Email" v-model="email">
      <input type="text" placeholder="Message" v-model="message">
      <button action="post" type="submit">Submit</button>
    </form>
  </section>
</template>



<script>
import {ref} from "vue";

export default {
  setup() {
    let success = false;
    let error = false;
    const name = ref(null);
    const email = ref(null);
    const message = ref(null);

    function onSuccess(msg) {
      success = true;
    };

    function onFailure(msg) {
      error = true;
    };

    function storeContact() {
      axios.post('post', {
        name: 'name',
        email: 'email',
        message: 'message'
      })
        .then((res) => {
          onSuccess(res.data.message)
        })
        .catch((error) => {
          onFailure(error.response.data.message)
        })
    };
    return {
      success,
      error,
      name,
      email,
      message,
      storeContact
    }
  }
}
</script>

另外，有没有办法像这样在axios.post 中使用array 而不是properties：

axios.post('post', [name, email, message]).then(...

Answer 1

感谢@NikolaPavicevic 和@tony19 我能够解决它。

1. post 字段确实是一个占位符，但我不知道它连接到route。我不得不将其更改为相应的路线/contact。这方面的错误信息写在laravel logs。
2. 确实可以将发布的信息写入（类似数组的？）对象中。此外，将onSuccess 和onFailure 中的代码直接放在axios 函数中可以使其更具可读性。

这是现在的代码：

<script>
import {ref} from "vue";

export default {
  setup() {
    let success = false;
    let error = false;
    const user = ref({
      name: null,
      email: null,
      message: null
    });

    function storeContact() {
      axios.post('/contact', Object.values(user.value))
        .then((res) => {
          success = true
        })
        .catch((error) => {
          error = error.data.message
        })
    };

    return {
      success,
      error,
      user,
      storeContact
    }
  }
}
</script>

非常感谢你们！我会接受@Nikola 的回答。

Answer 2

如果您需要将数组传递给 axios post，请尝试以下操作：

<template>
  <section class="contact">
    <form>
      <input type="text" placeholder="Name" v-model="user.name">
      <input type="text" placeholder="Email" v-model="user.email">
      <input type="text" placeholder="Message" v-model="user.message">
      <button @click.prevent="storeContact">Submit</button>
      <p v-if="error">{{ error }}</p>
    </form>
  </section>
</template>



<script>
import {ref} from "vue";

export default {
  setup() {
    let success = false;
    let error = '';
    const user = ref({
      name: '',
      email: '',
      massage: ''
    });

    function storeContact() {
      axios.post('Your-API-URL', Object.values(user.value))
        .then((res) => {
          console.log(res.data)
          success = true
        })
        .catch((error) => {
          error = error.data.message
          )
        })
    };
    return {
      success,
      error,
      user,
      storeContact
    }
  }
}
</script>