Bootstrap модальные формы редактирования, используемые на нескольких Vue компонентах, не редактируются с использованием правильных идентификаторов компонентов - PullRequest
Новая
       75

Bootstrap модальные формы редактирования, используемые на нескольких Vue компонентах, не редактируются с использованием правильных идентификаторов компонентов

0 голосов
/ 28 апреля 2020

Я рисую компонент с формой редактирования на своей домашней странице, используя v-for в Vue, но кнопки редактирования захватывают идентификатор первого компонента, отображаемого на странице, независимо от того, какой из них был нажат. Например: на экране есть компоненты 1, 2 и 3, у каждого из которых есть кнопка редактирования. Кнопка редактирования на 1, 2 и 3 всех компонентах редактирования 1. Чтобы это исправить, я попытался v-связать цель данных кнопки редактирования и идентификатор мода, но теперь кнопки редактирования ничего не делают при нажатии. Вот код для исходной попытки, за которой следует попытка с использованием v-binding: 

<div>
    <button
    type="button"
    class="btn btn-sm mt-1 ml-3 btn-primary text-center"
    data-toggle="modal"
    <!-- line below in question -->
    data-target="#edit-crypto-modal"
    data-whatever="@getbootstrap"
    >Edit</button>
        <div
        class="modal fade"
        <!-- line below in question -->
        id="edit-crypto-modal"
        tabindex="-1"
        role="dialog"
        aria-labelledby="edit-crypto-modal-label"
        aria-hidden="true"
        >...

<!-- same code but with v-binding -->    
<div>
    <button
    type="button"
    class="btn btn-sm mt-1 ml-3 btn-primary text-center"
    data-toggle="modal"
    <!-- line below in question -->
    :data-target="'#'+cryptoProp.id"
    data-whatever="@getbootstrap"
    >Edit</button>
        <div
        class="modal fade"
        <!-- line below in question -->
        :id="cryptoProp.id"
        tabindex="-1"
        role="dialog"
        aria-labelledby="edit-crypto-modal-label"
        aria-hidden="true"
        >

Чего мне не хватает? Спасибо.

...