javascript - 選択したオプションを Svelte の属性にバインドする方法

Question

選択した入力を宣言された属性に接続したい洗練されたコンポーネントがあります。私の問題は、「flightschedules」で宣言された属性「status」へのステータスの選択値のバインディングが機能しないことです。

オプションは属性の質問からのものです: オンタイム、遅延、キャンセル 誰か助けてくれませんか?

これが私のコードです（フォームを作成するためのコンポーネントです。たとえば、フライトスケジュールを作成します）：

<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>