使用Vue Composition API结合Ajax提交表单至MongoDB失败排查

核心问题分析 #

• 未阻止表单默认提交行为：表单提交时浏览器会自动刷新页面，导致fetch请求还没完成就被中断，数据根本传不到后端。
• 错误获取表单数据：event.target是<form>元素，它本身没有value属性，所以event.target.value会返回undefined，根本拿不到选中的颜色值。

方案一：手动获取数据+阻止默认行为 #

直接修改onSubmit函数，先拦截默认刷新，再正确获取选中的radio值：

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

export default {
    name: 'SurveyView',
    setup() {
        const onSubmit = (event) => {
            // 阻止页面刷新，让fetch请求正常完成
            event.preventDefault();
            
            // 通过选择器获取选中的radio元素，拿到它的value
            const checkedColor = event.target.querySelector('input[name="color"]:checked').value;
            
            fetch("/survey", {
                method: "post",
                headers: {
                    'Content-Type': 'application/json',
                },
                // 把数据包装成对象，后端更容易解析存入MongoDB
                body: JSON.stringify({ color: checkedColor })
            })
            // 加个请求状态反馈，方便排查问题
            .then(res => res.json())
            .then(data => console.log("提交成功:", data))
            .catch(err => console.error("提交出错:", err));
        };

        onMounted();

        return {
            onSubmit
        }
    }
} 
</script>

方案二：用Vue双向绑定（更符合Vue开发习惯） #

通过响应式变量绑定radio的选中状态，不用手动操作DOM，代码更清晰：

模板修改：

<form @submit="onSubmit">
    <fieldset>
        <legend>What is your favourite Color? </legend>
        <div>
            <div>
                <!-- 用v-model绑定响应式变量 -->
                <input type="radio" name="color" value="Red" v-model="selectedColor">
                <label>Red</label>
            </div>
            <div>
                <input type="radio" name="color" value="Blue" v-model="selectedColor">
                <label>Blue</label>
            </div>
        </div>
    </fieldset>
    <button type="submit" class="btn btn-primary">Submit Survey</button>
</form>

脚本修改：

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

export default {
    name: 'SurveyView',
    setup() {
        // 定义响应式变量，初始值设为默认选中的Red
        const selectedColor = ref("Red");
        
        const onSubmit = (event) => {
            event.preventDefault();
            
            fetch("/survey", {
                method: "post",
                headers: {
                    'Content-Type': 'application/json',
                },
                // 直接用响应式变量的值，不用手动找DOM
                body: JSON.stringify({ color: selectedColor.value })
            })
            .then(res => res.json())
            .then(data => console.log("提交成功:", data))
            .catch(err => console.error("提交出错:", err));
        };

        onMounted();

        return {
            onSubmit,
            selectedColor
        }
    }
} 
</script>

额外提醒 #

• 要确保后端的/survey接口能正确解析JSON请求体，并且正确将数据插入MongoDB。
• 保留请求的成功/失败日志，后续出问题时能快速定位是前端还是后端的问题。

内容的提问来源于stack exchange，提问作者RWWW