我的Svelte选择块无法正确刷新

问题描述

我有2个select下拉列表，我试图根据第一个select的值动态更改第二个select内的选项。
奇怪的是，如果我尝试使用硬编码的值，一切都会顺利进行。
一旦尝试从数据库中获取数据（我使用MongoDB），并从存储中检索数据，第二选择就无法正确刷新。

这是一些代码：

App.svelte

<script>
    import { text } from "svelte/internal";
    import { onMount } from "svelte";
    import axios from "axios";
    import {
        clientelaTargets,tipologiaOffertas,} from "./shared/stores/CachedStores.js";
    import { get } from "svelte/store";

    let people = [];
    let offerte = [];
    let offerteList = [
        { code: "Alpha",descr: "Alpha Offer",fkTargetClientela: "1",id: 1 },{ code: "Beta",descr: "Beta Offer",id: 2 },{ code: "Gamma",descr: "Gamma Offer",id: 3 },{ code: "Delta",descr: "Delta Offer",id: 4 },{ code: "Omega",descr: "Omega Offer",fkTargetClientela: "2",id: 5 },];
    let targetList = [
        { code: "1",descr: "Target 1",id: 11 },{ code: "2",descr: "Target 2",id: 22 },{ code: "3",descr: "Target 3",id: 33 },];
    let fk_target_clientela = "";
    let fk_offerta = "";
    onMount(async () => {
        const { data } = await axios.get("/api/users");
        people = data;
        const resCT = await fetch("/api/clientelaTargets");
        $clientelaTargets = await resCT.json();
        const resTO = await fetch("/api/tipologiaOffertas");
        $tipologiaOffertas = await resTO.json();
    });
//This is Now retrieving hard-coded data,to switch,change offerteList to $tipologiaOffertas
    $: offerte = offerteList.filter(
        (item) => item.fkTargetClientela === fk_target_clientela
    );

</script>

<main>
    <div class="select-container">
        <label>Target Client *
            <br />
            <br />
            <div class="select">
                <select bind:value={fk_target_clientela}>
                    {#each targetList as item (item.id)}
                        <option value={item.code}>{item.descr}</option>
                    {/each}
                </select>
            </div>
        </label>
        <label>Offer Type *
            <br />
            <br />
            <div class="select">
                <select bind:value={fk_offerta}>
                    {#each offerte as item (item.id)}
                        <option value={item.code}>{item.descr}</option>
                    {/each}
                </select>
            </div>
        </label>
    </div>
</main>

CachedStores.js

import {writable} from 'svelte/store';
export const clientelaTargets = writable([]);
export const tipologiaOffertas = writable([]);

从数据库中检索的数据基本上与硬编码的数据相同。 感谢您的帮助！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）