如何在 Svelte 中的数组更改时更新 select 项

Question

在我的应用程序中，我有一个 select 用于选择项目。当我从数组中删除一个项目时，我想更新列表，但我找不到办法做到这一点

App.svelte

<script>
    import Car from './Cars.svelte'
    import MaintainCar from './MaintainCar.svelte'
    import { cars } from './store.js'
</script>

    <Car {cars}/>
    <MaintainCar {cars} />

Cars.svelte

<script>
    export let cars
    export let selected_car = ''
    let colour = ''
    let car_list = getCars($cars)
    $: colour = $cars[selected_car]

    function getCars(cars) {
        let car_list = []
        for (const [key, value] of Object.entries(cars)) {
            car_list.push(key);
        }
        if (!selected_car) {
            selected_car = car_list[0]
            colour = cars[selected_car]
        }
        return car_list
    }

    function selectCar() {
        colour = $cars[selected_car]
    }
</script>

<select bind:value={selected_car} on:click={selectCar}>
    {#each car_list as car}
        <option value={car}>
            {car}
        </option>
    {/each}
</select>
<input type="text" bind:value={colour} placeholder="colour"/>

维持Cars.svelte

<div id='maintain'>
    <input type="text" bind:value={car} placeholder="car"/>
        <input type="text" bind:value={colour} placeholder="colour"/>
    <div>
        <button class="select-button" on:click={deleteCar}>Delete</button>
    </div>
</div>

<script>
    export let cars
    let car = ''
    $: colour = checkCar(car)

    function checkCar(car) {
        colour = '';
        if (car && car in $cars) {
            colour = $cars[car];
        }
        return colour
    }

    function deleteCar() {
        if (car in $cars) {
            delete $cars[car]
            car = ''
            colour = ''
                        console.log($cars)
        }
    }
</script>

store.js

import { writable } from 'svelte/store'

export const cars = writable({'Audi': 'red', 'BMW':'blue', 'Hillman': 'green'})

Answer 1

删除时可以re-assigning$cars，将car_list赋值标记为反应语句

在MaintainCar.svelte中：

function deleteCar() {
    if (car in $cars) {
        delete $cars[car]
        car = ''
        colour = ''
        $cars = $cars
    }
}

在Cars.svelte中：

let car_list
$: car_list= getCars($cars)

例如：https://svelte.dev/repl/3c08db46c34c449f90b75df015c0fa01?version=3.46.4

如何在 Svelte 中的数组更改时更新 select 项

How to update a select item when the array changes in Svelte

svelte