如何将简单的用户输入从Vue传递到Laravel Controller？

<template>
  <div>
    <form @submit="submitForm">
      <input type="text" v-model="userInput">
      <button type="submit">Submit</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      userInput: ''
    };
  },
  methods: {
    submitForm() {
      axios.post('/api/submit', { userInput: this.userInput })
        .then(response => {
          // 处理响应
        })
        .catch(error => {
          // 处理错误
        });
    }
  }
};
</script>

// routes/web.php

Route::post('/api/submit', 'UserController@submit');

// app/Http/Controllers/UserController.php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class UserController extends Controller
{
    public function submit(Request $request)
    {
        $userInput = $request->input('userInput');
        
        // 处理用户输入的数据
        
        return response()->json(['message' => 'Data submitted successfully']);
    }
}