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

【问题标题】：Hide other buttons on mouseover在鼠标悬停时隐藏其他按钮
【发布时间】：2020-05-27 22:10:56
【问题描述】：

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

在我必须从父母那里更新一个子道具之前，一切都很顺利。我收到此错误：

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

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

感谢您的帮助！

【问题讨论】：

标签： svelte sapper

【解决方案1】：

还有一个错误，当按钮实际悬停时，您没有清除isOpaque 字段。然后，我建议进行优化，{#each} 中继器发出当前索引，因此我们不需要额外的变量。这是我使用$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

【讨论】：

谢谢你。您的代码更清晰，但它似乎并没有改变翻转时的不透明度。你知道为什么吗？
嗯，我提供的 REPL 做到了——至少我是这样理解你的想法的 ^^ 不在鼠标下方的按钮显示为灰色。你期待什么？
每个按钮都是不透明度：1，当我将鼠标悬停时，它会变为橙色，而其他按钮会在不透明度：0.5 处消失。当我推出每个按钮时，都会返回不透明度：1。
这很简单 :) 更新了 REPL，只需刷新即可。更改在 APP.svelte 第 12 行

【解决方案2】：

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

docs reference

【讨论】：

谢谢@2pha。我在文档中没有看到任何提及这个 $get ......我们怎么知道它存在？？

【解决方案3】：

您需要仔细阅读诊断消息。上面写着……

除非使用accessors: true 或<svelte:options accessors/> 编译，否则不能直接在组件实例上设置Props

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

<svelte options accessors={true}/>

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

【讨论】：