Как связать переменную, объявленную с помощью директивы Svelte let? - PullRequest
Новая
       23

Как связать переменную, объявленную с помощью директивы Svelte let?

2 голосов
/ 29 июня 2019

Я пытаюсь обойти «Не удается связать переменную, объявленную с ошибкой let: directive». 

// FancyList.svelte
<script>
    export let items = []   
</script>

<ul>
    {#each items as item, i}
        <li><slot item={item}></slot></li>
    {/each} 
</ul>

// App.svelte
<script>
    import FancyList from './FancyList.svelte'
    let items = [ {x: 'AX', y: 'AY'}, {x: 'BX', y: 'BY'}, {x: 'CX', y: 'CY'}]
</script>

<FancyList bind:items={items} let:item={item}>
    <input type=text bind:value={item.x}>
    <input type=text bind:value={item.y}>
</FancyList>

Доступно как Svelte REPL

ВещиДо сих пор я пытался

1) Заставить FancyList передать индекс элемента вместо самого элемента и связать items[index] вместо item. 

<FancyList items={items} let:index={index}>
    <input type=text bind:value={items[index].x}>
    <input type=text bind:value={items[index].y}>
</FancyList>

Доступно как Svelte REPL

Первоначально он будет правильно отображаться, но при изменении входного значения выдает ошибку "ReferenceError: index is not определении".

2) Принятие FancyList для передачи onChangeобратный вызов и не используется bind. 

<FancyList bind:items={items} let:item={item} let:onChange={onChange}>
    <input type=text value={item.x} on:input={e => onChange({...item, x: e.target.value})}>
    <input type=text value={item.y} on:input={e => onChange({...item, y: e.target.value})}>
</FancyList>

Доступно как Svelte REPL .

Это работает, но значительно более многословно.

Ответы [ 2 ]

2 голосов
/ 30 июня 2019

Это ошибка, что ваша первая попытка решения не сработала - я поднял проблему . Другой возможный обходной путь - поместить логику обновления в родительский компонент, чтобы дочерний компонент не нуждался в особой осведомленности о требованиях родителя: https://svelte.dev/repl/2d13c33c34f445d99618fbb1bc8bebb9?version=3.6.1. Это примерно то же самое, что и ваше второе решение, многословие - мудрый.

0 голосов
/ 02 июля 2019

Вы можете использовать svelte:component для этого. Это в основном позволит вам передать компонент в FancyList, сделав его своего рода компонентом высшего порядка.

Вот пример REPL, который показывает, что он работает:

https://svelte.dev/repl/bc985c21735f4b2a9945f1ddc74988e6?version=3.6.1

...