Как я могу удалить внешний компонент в каждом с Svelte? - PullRequest
Новая
       99

Как я могу удалить внешний компонент в каждом с Svelte?

0 голосов
/ 12 февраля 2020

При попытке удалить импортированный компонент появляется ошибка «Uncaught (в обещании) TypeError: Невозможно прочитать свойство 'c' of undefined».

Но когда я делаю то же самое с элементами dom » проблем нет.

Todo.svelte 

<script>
  import { fade, slide } from "svelte/transition";
  import { Button, Field, Input } from "svelma";
  import Icon from "svelte-awesome";
  import { trash, heart } from "svelte-awesome/icons";
  import { Col, Row } from "sveltestrap";
  import "bulma/css/bulma.css";
  import TodoItem from "/src/components/Todo/TodoItem.svelte";
  import { todos } from "/src/stores";

function remove(event) {
    const { id } = event.detail;

    const hasTodo = todos.find({ id });
    if (hasTodo && Object.keys(hasTodo).length > 0) {
      todos.remove({ id });
    }
  }
</script>

<div class="container">
   {#each $todos as item (item.id)}
      <TodoItem todo={item} on:removeTodo={remove} on:updateTodo={updateCompleteStatus} />
   {/each}
</div>

TodoItem.svelte с ошибкой 

<Row class={todo.completed ? 'completed' : ''} >
  <Col md="10">
    <p transition:fade class="description">
      <strong>{todo.description}</strong>
    </p>
  </Col>
  <Col md="2" class="centered">
    <Button type="is-text" on:click={createRemoveEvent} class="btn-remove">
      <Icon type="is-text" data={trash} class="trash-icon" scale="3" />
    </Button>
  </Col>
</Row>

TodoItem.svelte без проблем 

<div class={todo.completed ? 'completed row' : 'row'}>
  <div class="col-md-10">
    <p transition:fade class="description">
      <strong>{todo.description}</strong>
    </p>
  </div>
  <div class="col-md-2 centered">
    <button
      type="is-text"
      on:click={createRemoveEvent}
      class="btn-remove">
      Remove
    </button>
  </div>
</div>
...