更改字段会更新 livewire @entangle 字段

Question

我有一个与 livewire 属性纠缠在一起的组件。

<div x-data="{show: @entangle($attributes->wire('model'))}>
    <form>
        <input type="checkbox" wire:model.defer="story.show_name" name="show_name" />
    </form>
</div>

我在这个组件中有一个表单。如果我更新表单中的任何字段，它将向服务器错误发送更新，它还会修改wire：model。一个例子是一个复选框。如果我取消选中它，那么组件就会隐藏。

例子：

[
  {
    "type": "syncInput",
    "payload": {
      "name": "story.show_name",
      "value": false
    }
  },
  {
    "type": "syncInput",
    "payload": {
      "name": "show",
      "value": false
    }
  }
]

知道为什么这会突然捕获所有输入/更改事件吗？

Answer 1

问题是因为我像{{$attributes}} 那样向组件添加了所有属性。这会将wire:model="show" 添加到元素中。由于我的组件不是输入字段而只是一个 div，因此它会接受所有 input 事件。

我将{{$attributes}} 替换为{{$attributes->except('wire:model')}} 来解决问题。