javascript - 如何将所选选项与 Svelte 中的属性绑定

Question

我有一个苗条的组件，我想将选定的输入与声明的属性连接起来。我的问题是所选状态值与“航班计划”中声明的属性“状态”的绑定不起作用。

选项来自属性问题：准时，延迟，取消有人可以帮我吗？

这是我的代码（它是创建表单的组件，例如创建航班计划）：

<script>
    import axios from "axios";
    import { onMount } from "svelte";
    export let params = {};

    let flightschedule = {
        timeofdeparture: "",
        flightnumber: "",
        gatenumber: "",
        status: "",
        privatejetline_id: null,
    };

    let questions = [
        { text: "on-time" },
        { text: "delayed" },
        { text: "cancelled" },
    ];

    let selected;
    let privatejetline_ids = [];

    onMount(() => {
        getPrivateJetLineIds();
        selected = params.status;

    });

    function getPrivateJetLineIds() {
        axios
            .get("http://localhost:8080/flights/privatejetline")
            .then((response) => {
                privatejetline_ids = [];
                for (let privatejetline of response.data) {
                    privatejetline_ids.push(privatejetline.id);
                }
                flightschedule.privatejetline_id = privatejetline_ids[0];
            });
    }

    function addFlightSchedule() {
        axios
            .post("http://localhost:8080/flights/flightschedule", flightschedule)
            .then((response) => {
                alert("Flight Schedule added");
                console.log(response.data);
            })
            .catch((error) => {
                console.log(error);
                alert(error);
            });
    }
</script>


<div class="mb-3">
    <label for="" class="form-label">Status</label>

    <select bind:value={flightschedule.status} class="from-select">
        <option value="" disabled>-- Select Status --</option>
        {#each questions as question}
        <option value={selected} selected={selected===flightschedule.status}>{question.text}</option>
        {/each}
    </select>
</div>

标签： javascriptfrontendsveltesvelte-componentbindvalue

Answer 1

实际上，不需要selected变量，只需绑定flightschedule.status. 尝试在 REPL 中关注。

<script>
    let flightschedule = {
        timeofdeparture: "",
        flightnumber: "",
        gatenumber: "",
        status: "",
        privatejetline_id: null,
    };

    let questions = [
        { text: "on-time" },
        { text: "delayed" },
        { text: "cancelled" },
    ];
    
    $: console.log('---->', flightschedule.status)
</script>



<div class="mb-3">
    <label for="" class="form-label">Status</label>

    <select bind:value={flightschedule.status} class="from-select">
        <option value="" disabled>-- Select Status --</option>
        {#each questions as question}
        <option value={question.text}>{question.text}</option>
        {/each}
    </select>
</div>