3

我有一个像<select>这样的activity.status ：

<script>
import Dropdown from './Dropdown.svelte'
let activity = {
    id: 1,
    projectName: "Test Project",
    lead: {id: 10, value: "Unassigned"},
    status: {id: 3, value: "Closed"},
    statusDetail: {id: 15, value: "Missing Budget"}
    }

let statusOptions = [
        { id:1, value:"Open"},
        { id:2, value:"On-Hold"},
        { id:3, value:"Closed"}
        ]

$:console.log(activity.status);
</script>

<select bind:value={activity.status}>
    {#each statusOptions as option}
        <option value={option} >{option.value}</option>
    {/each}
</select>

<!-- <Dropdown  options={statusOptions} bind:selected={activity.status}/> -->

$:console.log(activity.lead)每次<select>更新.

但是一旦我使用<Dropdown/>它，它就会触发两次。这是组件：

<script>
export let selected = {} 
export let options = [{id:0, value: "No Options..."}]
</script>

<select bind:value={selected}>
    {#each options as option}
        <option value={option} >{option.value}</option>
    {/each}
</select>

我对 svelte 的了解不多，但我研究了 API 并在 stackoverflow 上进行了搜索。我唯一没有尝试的是发出自定义事件。但这似乎有点额外的代码和不雅致。我不介意双重更新，但它似乎很愚蠢。所以我想知道：为什么会这样？我应该发出自定义事件吗？还是我犯了一些基本错误？

谢谢你，菲利普

4

1 回答 1

0

我的问题突然消失了。我怀疑它与单个顶级元素有关，因为在我删除组件中的其他顶级元素后它消失了。但是，当我把它们放回去时，它仍然有效，所以我不能再重现这个问题了。

Svelte 不要求您拥有像 Vue 或 React 这样的单个顶级元素，所以这可能是我犯的一些错误，但不记得了。

同样在Svelte 的官方教程中，他们建议人们谨慎使用组件绑定。如果有人遇到同样的问题，我会发布答案。祝你好运！

于 2020-05-09T16:21:52.480 回答