Svelte不会更新输入的派生值

时间:2019-05-03 11:22:51

标签: svelte svelte-component svelte-store

加载页面时,$greeting会显示正确的值。

由于某些原因,当我更改input中的文本时,它没有更新。

App.svelte

<script>
    import { name, greeting } from './stores.js';
</script>

<h1>{$greeting}</h1>
<input value={$name}>

stores.js

import { writable, derived } from 'svelte/store'

export const name = writable('world')

export const greeting = derived(
    name,
    $name => `Hello ${$name}!`
)

1 个答案:

答案 0 :(得分:2)

您需要像这样在bind:valueinput

<input bind:value={$name}>

您拥有的方式仅适用于页面加载。此后,它不再听input上的更改,这就是$name不更新的原因。

bind:value类似于在HTML中执行onchange

<input
    onchange="event => name.set(event.target.value)"
    value={$name}
>