如何解决如何将所选选项与 Svelte 中的属性绑定
我有一个 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>
解决方法
<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>
,
其实不需要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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。