javascript - 数组元素在控制台日志中正确，但渲染不正确

Question

我试图将组件分成选定的和未选定的数组，以便与前面的组件进行比较。但是，当选择数组的第一项时，它会被复制(而不是添加)到另一个数组 - 至少在屏幕上是这样。但在控制台日志中，数组是应有的样子。

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

Exception: Error: : Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '' at Cards.get data [as data] at Cards.invokeGetter (:1:142) at flush

this is the repl of the problem

<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
  })
}

这是控制台.log:

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}

然后相应地更改函数。