javascript - 数组元素在控制台日志中是正确的，但呈现不正确

Question

我试图将组件分成选定的数组，而不是选定的数组，以便与前一个数组分开。But when the first item of the array is selected, it is copied, instead of added, to the other array - at least on the screen. 但在控制台日志中，数组是应有的。

我在调试时发现了这个错误，但我不知道如何解决这个问题。

例外：错误：：除非在刷新时使用 Cards.get data [as data] at Cards.invokeGetter (:1:142) 处的“访问器：true”或“”编译，否则无法直接从组件实例中读取道具

这是问题的repl

<section class="_residencial_cards">
{#if compareList.length > 0}
  <div class="test">
    <h1>comparar</h1>
    {#each compareList as item}
        <Card card={item} on:mark={changeList(item)}/>
    {/each}
  </div>
{/if}
{#each initialCards.filter(c => c.compare === false) as card}
    <Card {card} on:mark={changeList(card)}/>
{/each}
</section>

这是划分数组的函数：

function changeList(card) {
 compareList = [...compareList, card]
 card.compare = true
 initialCards = initialCards.filter(t => t !== card)
}

组件卡：

<label for="{frontprops.name}">Compare</label>
<input type="checkbox" id='{frontprops.name}' name="" on:change={change} >

及其调度代码：

function change(event) {
  check = event.target.checked
  dispatch('mark', {
    bool: check
  })
}

这是控制台日志：

Answer 1

问题是每个循环中的关键：

{#each initialCards.filter(c => c.compare === false) as card}
   <Card {card} on:mark={changeList(card)}/>
{/each}

它应该是：

{#each initialCards.filter(c => c.compare === false) as card,i (card.compare)}
  <Card {card} on:mark={changeList(card.compare)}/>
{/each}

然后相应地更改功能。