在鼠标悬停时隐藏其他按钮

Question

我有一组动态按钮，我想在鼠标悬停时隐藏其他按钮。我的尝试有一个REPL here。

一切顺利，直到我必须更新来自父级的子道具。我收到此错误：

Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'

所以我将选项行放在 Btn.svelte 中，但我仍然遇到错误。我错过了什么吗？或者也许有更简单的方法??

感谢您的帮助！

Answer 1

变化：
btns[i].isOpaque = true;
至：
btns[i].$set({isOpaque:true});.

docs reference

Answer 2

还有一个错误，当按钮实际悬停时，您没有清除 isOpaque 字段。然后，我建议优化，{#each} 转发器发出当前索引，因此我们不需要额外的变量。这是我的 correction/suggestion 使用 $set 方法更新组件属性:

<script>
    import Btn from "./Btn.svelte";
    let current;
    const data = ["foo", "bar", "baz"];
    let btns = [];

    function overed (e) {
        console.log("overed :" + e.detail.data);
        btns.forEach((btn, i) => {
            btn.$set({isOpaque: e.detail.data !== data[i]})
        })
    }
</script>

<style>
</style>

{#each data as item, index}
<Btn on:overed={overed} data={item} bind:this={btns[index]}>{item}</Btn>
{/each}

这是一个简化版本，不需要从父组件更新子组件属性：

https://svelte.dev/repl/f049fb762bfb481ca3c8998879a3cdb3?version=3.22.3

Answer 3

您需要仔细阅读诊断信息。它说这个...

Props cannot be set directly on the component instance unless compiling with accessors: true or <svelte:options accessors/>

...但是您的组件有...

<svelte options accessors={true}/>

...这根本不是一回事！

在鼠标悬停时隐藏其他按钮

Hide other buttons on mouseover

svelte

sapper