如何使用ajax的价值组合api提交表单数据

Question

我有一个包含几个无线电输入类型的表单，当我试图将表单数据提交给mongoDB时，它失败了。onSubmit有问题吗?谢谢!

的形式:

<form @submit="onSubmit">
      <fieldset>
      <legend>What is your favourite Color? </legend>
      <div>
        <div><input type="radio" name="color"  value="Red" checked><label>
            Red</label>
        </div>
        <div><input type="radio" name="color" value="Blue"><label>
            Blue</label>
        </div>
        </fieldset>
    <button type="submit" class="btn btn-primary">Submit Survey</button>
</form>

Vue:

<script>
import { ref, onMounted } from "vue";
export default {
    name: 'SurveyView',
    setup() {
        const onSubmit = (event) => { fetch("/survey", {
            method: "post",
            headers: {
                'Content-Type': 'application/json',
            },
   
            body: JSON.stringify(event.target.value)
        })};
        onMounted();
        return {
            onSubmit
    }
} 

Answer 1

您没有将任何数据属性绑定到模板。你可以使用v-model绑定你的单选按钮，然后使用数据提交到服务器/db。

<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>
<div id="app">
<form @submit.prevent="onSubmit">
    <fieldset>
      <legend>What is your favourite Color?</legend>
      <div>
        <div>
          <input type="radio" name="color" value="Red" v-model="color" /><label>
            Red</label
          >
        </div>
        <div>
          <input
            type="radio"
            name="color"
            value="Blue"
            v-model="color"
          /><label> Blue</label>
        </div>
      </div>
    </fieldset>
    <button type="submit" class="btn btn-primary">Submit Survey</button>
  </form>
</div>
<script type="module">
  import { createApp, ref } from 'vue'
 
  createApp({
    name: "App",
  setup() {
    const color = ref(null);
    const onSubmit = () => {
      console.log(color.value);
      
      // make server call with appropriate data
    };
    return { color, onSubmit };
  },
  }).mount('#app')
</script>