0

我有 2 个选择下拉菜单，我正在尝试根据第一个选择的值动态更改第二个选择中的选项。
奇怪的是，如果我尝试使用硬编码值，一切都会顺利进行。
一旦我尝试从我的数据库（我使用 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", fkTargetClientela: "1", id: 2 },
        { code: "Gamma", descr: "Gamma Offer", fkTargetClientela: "1", id: 3 },
        { code: "Delta", descr: "Delta Offer", fkTargetClientela: "1", 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([]);

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

4

0 回答 0