相关疑难解决方法(0)

我试图让我的头脑围绕苗条的 3 反应性事情......

1. 我想在单击按钮时强制刷新 UI。我正在使用一个自定义组件AsyncFetcher，它接受 HTTP 发布数据，并data为其插槽返回对象（http 发布结果）。

2. 我想要一个禁用功能。因此，当单击“禁用”按钮时，会调用 http api，然后刷新数据视图。

<script>
    export let id

    function onDisable() {
        fetch('disable-api-url', {id: id})
        // Then ??
        // What to do after the fetch call, to refresh the view
    }
</script>

<AsyncFetcher postParam={id} let:data>
    {data.name}

    <button on:click={??}>Refresh</button>
    <button on:click={onDisable}>Disable Item</button>
</AsyncFetcher>

我试图on:click={() => id=id}欺骗它刷新无济于事。Ifid本来是一个对象而不是字符串id={...id}会起作用，不幸的是，这里不是这种情况。

实现这一目标的正确方法是什么？

在 Svelte 中，我有一个组件用于在两个不同的列表中显示项目。当这些项目从一个列表移动到另一个列表时，它们会使用过渡来动画进出。

但是，我也有一种方法可以过滤屏幕上显示的内容。显示一组新项目将使用相同的组件，但具有不同的数据。在这种情况下，我不希望发生过渡动画。我认为添加local修饰符可以解决问题，但 Svelte 似乎没有将父元素放到列表中，而是重用它并在现有列表 DOM 元素中添加新数据。

我试图重现我在下面的示例代码中看到的内容。

通缉行为：

1. 单击待办事项会将待办事项从一个列表切换到另一个列表。
2. 单击“切换类别”将切换列出的 TODO，而不会对<li>添加或删除的 TODO进行动画处理。

实际行为：

1. 按预期发生。
2. 切换到的待办事项与动画一起执行。

我怎样才能改变我的例子，以获得我想要的效果？

App.svelte：

<script>
    import Todos from './Todos.svelte';

    let todos = [
        { id: 1, category: 'personal', name: 'Walk dog', done: false },
        { id: 2, category: 'personal', name: 'Take out trash', done: false },
        { id: 3, category: 'work', name: 'Make login page functional', done: false },
        { id: 4, category: 'work', name: 'Make login page elegant', done: false …