如何在不通知整个对象的情况下监视属性更改

Question

我正在尝试建立一个简单的系统，让用户选择两个选项之一或两者都不选择。选项都存储在同一个复杂对象中，该对象保存所有设置(不只是这两个)。

我已经看过类似的问题，比如:当一个属性在svelte
中发生变化时，如何做一些事情，但不幸的是，它们对我的情况不起作用——它们对整个对象的变化做出反应，而不仅仅是一个属性。即使使用&&语法，如下所述，也几乎可以工作，但不是完全工作。它看起来很完美，因为它只对值为真做出反应，这正是我需要的，但它只以一种方式工作。

下面是我的问题的简化版本:

<script>
let object = {a: false, b: false};

$: object.a && aActivated();
$: object.b && bActivated();

function aActivated(){
object.b = false;
}
function bActivated(){
object.a = false;
}

</script>
<label for="a">a</label>
<input type="checkbox" bind:checked={object.a} id="a">
<label for="b">b</label>
<input type="checkbox" bind:checked={object.b} id="b">

REPL这里

当你运行这个命令时，你可以看到，a可以停用b，但是b不能停用a。

我还尝试用||和,替换&&，但在这两种情况下，只要对象上的任何内容发生变化，函数就会运行，因此无法选择其中任何一个选项。

不，我不能切换到使用单选按钮，因为我希望用户也能够取消选择这两个选项。

Answer 1

处理事件而不是绑定和响应语句将是一个选项REPL

<script>
let object = {a: false, b: false};
function handleInput(event) {
const checked = event.target.checked
const key = event.target.id
if(checked) {
Object.keys(object).forEach(k => {
object[k] = false               
})
object[key] = true  
}else {
object[key] = false 
}
}
</script>
<label for="a">a</label>
<input type="checkbox" id="a"
checked={object.a}
on:input={handleInput}
>
<label for="b">b</label>
<input type="checkbox" id="b"
checked={object.b}
on:input={handleInput}
>

但是由于切换复选框感觉很奇怪，我将考虑为'none of others'选项添加一个额外的单选按钮