Blazor: удаление динамически созданного компонента всегда удаляет последний элемент из списка

Question

Я реализую простую доску пин-ап с Blazor WebAssembly. При удалении любой карты с помощью кнопки X всегда удаляется последний элемент в списке.

@foreach (var item in _cards)
{
    <div class="card-title">
        <input type="text" id="@item.TitleElementId" value="@item.Title" />
        <button class="btn-remove" @onclick="() => RemoveCard(item)">X</button>
    </div>
}
<button class="btn-add" @onclick="AddNewCard">+</button>

@code {
    private List<Card> _cards = new List<Card>();

    private void AddNewCard()
    {
        _cards.Add(new Card());
    }

    private void RemoveCard(Card card)
    {
        _cards.Remove(card);
        // Also tried _cards.RemoveAll(i => i.TitleElementId == card.TitleElementId);
    }
}

Answer 1

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

Оказывается, проблема с привязкой значений. Мне нужно использовать Blazor's @bind-"" вместо значения по умолчанию html value="". К сожалению, я не знаю точно, почему это происходит.

Так что вместо

<input type="text" value="item.Title"/>

я изменил на

<input type="text" @bind="item.Title"/>

и все работает как положено.