我怎样才能让一个苗条的应用程序正确更新字段？

Question

我有一个 svelte 应用程序（参见 repl here）

我想 select 从 select 盒子里拿出一辆车。颜色字段应更新为汽车的默认颜色。然后，用户可以在 colour 输入中覆盖它，并更新显示

这适用于第一辆车 selected，但之后颜色始终适用于前一辆车。

我做错了什么？

App.svelte

<script>
    import DisplayMessage from './display.svelte'
    import Car from './cars.svelte'
    let car = 'default car'
    let colour = 'default colour'
$: message = displayCar(car, colour)

function displayCar(car, colour) {
    if (!car || !colour) {
        return 'No car selected'
    }
    return `The ${car} is ${colour}`
}
</script>

<DisplayMessage  bind:display_message={message}/>
<Car bind:car_name={car} bind:colour={colour}/>

cars.svelte

<script>
    let makes  = {Audi: 'black', BMW: 'blue', Jaguar: 'green'}
    let cars = []
    for (const [key, value] of Object.entries(makes)) {
        cars.push(key);
    }

    export let car_name = '';
    export let colour = '';
    $: colour = makes[car_name]
</script>

<div class="double-column">
    <div>car</div>
    <select id="car-select" bind:value={car_name}>
        {#each cars as car}
            <option value={car}>
                {car}
            </option>
        {/each}
    </select>
</div>
<input type="text" bind:value={colour} placeholder="colour"/>

display.svlete

<div id="display-message">{display_message}</div>

<script>
    export let display_message = ''
</script>

Answer 1

您正在使用 bind:display_message={message}

这在 display_message 和 message 之间创建了一种双向关系，但不知何故搞砸了。一次有很多更新发生，一辆新车意味着一个新字符串，一个新颜色意味着一个新字符串，你的绑定意味着另一个字符串正在被发回。

最好在使用 bind: 时格外小心，尤其是不要绑定到反应变量，因为数据流很脆弱（最重要的是，它实际上没有意义，因为反应变量依赖于变量你的父组件）

由于您（很可能）不需要双向绑定，只需在此处删除 bind:this 即可正常工作。

我怎样才能让一个苗条的应用程序正确更新字段？

How can I get a svelte app to update fields correctly?

svelte