Svelte技术问题：输入框内容变更时绑定变量未同步更新

你当前的代码只做了单向数据渲染：把email和password的初始值渲染到输入框，但输入框内容变化时，并不会同步更新这两个变量，所以提交时它们还是初始的空字符串。

Svelte实现双向数据绑定的方式和React/Vue不同，不需要手动写onChange或v-model，直接用bind:value语法即可：

修改后的完整代码 #

<script>
    import axios from 'axios';

    let email = '';
    let password = '';

    function handleOnSubmit(e) {
        // 阻止表单默认提交行为，避免页面刷新
        e.preventDefault();
        axios.post('http://localhost:5000/auth/token', {
            data: {
                Email: email,
                Password: password
            }
        })
        .then(function (response) {
            console.log('登录成功:', response.data);
        })
        .catch(function(error) {
            console.error('登录失败:', error);
        });
    }
</script>

<form on:submit={handleOnSubmit}>
    <div class="mb-6">
        <label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Email</label>
        <!-- 把 value={email} 改成 bind:value={email} -->
        <input type="email" id="email" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" bind:value={email} placeholder="name@flowbite.com" required>
    </div>
    <div class="mb-6">
        <label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Password</label>
        <!-- 把 value={password} 改成 bind:value={password} -->
        <input type="password" id="password" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" bind:value={password} required>
    </div>
    <button type="submit" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Sign In</button>
</form>

关键修改点 #

• 将输入框的value={email}替换为bind:value={email}，密码输入框同理，实现输入框与变量的双向同步
• 在handleOnSubmit里添加e.preventDefault()，阻止表单默认的页面刷新行为（可选但推荐）
• 补充了axios请求的错误处理，方便调试

这样修改后，输入框内容变化时会自动同步到email和password变量，提交时就能获取到正确的输入值了。

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