SvelteKit更新请求

Question

我想要建立一个城镇搜索功能，所以我想要回忆API的每一个关键的笔画。不幸的是，我的代码没有像预期的那样工作。

这是我的密码

<script lang="ts">
    let query: string = ""

    $: towns = fetch(`https://geocoding-api.open-meteo.com/v1/search?name=${query}&language=de`)
        .then((response) => response.json())
        .then((res) => {
            return res
        })
</script>
<input value={query} type="text" placeholder="Suchen" class="input input-bordered w-full max-w-xs mb-8"/>

<pre><code>
    {#await towns}
        waiting
    {:then towns}
        {towns.results[0].name}
    {:catch error}
        error
    {/await}
</code></pre>

当我用默认值(如query )初始化let query: string = "Berlin"变量时，输出如预期的那样是柏林，但当我输入输入字段时，输出不会更新。我做错了什么？

Answer 1

您没有绑定查询，所以它不会更改。应该是这样：

<input bind:value={query} ... />