v-for prop value not getting updated with bootstrap modal

Question

I have the following code snippet

    

        
                      

              相关标签:
       
      

Answer 1

You may need to add key in v-for

<div class="list-group-item media" v-for="evt in event" :key="evt.id">
    <eventmodal :currentevent="evt"></eventmodal>
</div>

For the improvement of performance, v-for uses an “in-place patch” strategy and list rendering will not change on child component state or temporary DOM state changes. To track these changes you need to add key attribute with v-for.

I hope spaces are just typo in <eventmodal :currentevent = "evt"></eventmodal>, remove spaces from :currentevent = "evt".

---

Edited

You are showing same modal everytime, props are being passed correctly, but you are loading the same modal each time.

You should have dynamic id for each modal like following:

<eventmodal :id="evt.id" :currentevent="evt"></eventmodal>

and when you are showing this, you should use this dynamic id as following:

$("#" + event.id).modal()