Элементы массива корректны в журналах консоли, но не отображаются правильно - PullRequest
Новая
       5

Элементы массива корректны в журналах консоли, но не отображаются правильно

1 голос
/ 02 марта 2020

Я пытаюсь разделить компоненты на массивы отобранных, а не отобранных, для того, чтобы разбить первые. Но когда первый элемент массива выбран, он копируется вместо добавления в другой массив - по крайней мере, на экране. Но в журнале консоли массивы такие, какими они должны быть.

Я обнаружил эту ошибку при отладке, но я не знаю, как решить эту проблему.

Исключение: Ошибка:: Реквизиты не могут быть прочитаны напрямую из экземпляра компонента, если не скомпилированы с 'accessors: true' или '' в Cards.get data [as data] в Cards.invokeGetter (: 1 : 142) при гриппе sh

это ответ задачи 

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

Это console.log:

enter image description here

1 Ответ

0 голосов
/ 03 марта 2020

Проблема заключалась в том, что ключ в каждом l oop: 

{#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}

и затем соответственно изменять функцию.

...