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

Question

我有一个 svelte 组件，我想在其中连接选定的输入和声明的属性。我的问题是状态的选定值与 '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>

Answer 1

<option value={selected}这条线不可能是对的。您将所有三个选项绑定到相同的值。

您可能需要以下内容：

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

Answer 2

其实不需要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>

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

How to bind selected option with the attribut in Svelte

javascript

frontend

svelte

svelte-component

bindvalue