javascript - 如何让Vue在每次 Action 发生时从数据库获取数据？

Question

每行旁边都有一个按钮，每行在数据库中都有不同的条目。单击该按钮后，我已成功获取想要显示在 Bootstrap Modal 中的信息。我仍在努力确保 Vue 在每次点击时都会更新。我有以下模态代码:

<tr v-for="click in clicks">
<td><button type="button" @click="returnIndex(click)" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-xl">{{ $t('common.moreDetails') | capitalize }}</button>
                                    <div class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
                                        <div class="modal-dialog modal-xl" role="document">
                                            <div class="modal-content">
                                                <div class="modal-body">
                                                    <div class="container-fluid">
                                                        <div class="row">
                                                            <div class="col-md-3">
                                                                {{ $t('entity.property1') | capitalize }}
                                                                {{ entity.somePropertyName1 }}
                                                            </div>
                                                            <div class="col-md-3">
                                                                {{ $t('entity.property2') | capitalize }}
                                                                {{ entity.somePropertyName2 }}
                                                            </div>
                                                            <div class="col-md-3">
                                                                {{ $t('entity.property3') | capitalize }}
                                                                {{ entity.somePropertyName3 }}
                                                            </div>
                                                            <div class="col-md-3">
                                                                {{ $t('entity.property4') | capitalize }}
                                                                {{ entity.somePropertyName4 }}
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                            </tr>

在我的方法中我有这个:

        returnIndex(click) {
            return click.status = true;
        }

此方法的灵感来自this answer on SO 。但我可能误解了它。目前的情况是，当我单击按钮时，它显示该实体的 somePropety ，但是当您单击另一个实体时，它仍然显示相同的属性，但应该刷新(即获取不同的数据)。

这些是一些图片，可以清楚地说明:

当值 test 实际上只分配给一个条目时，它会在我拥有的所有 5000 个条目上显示 test。它应该为其余部分选取不同的值，但事实并非如此。

编辑:需要明确的是，test 应该位于 propety1/2/3/4 下，但尚未设法使其正常工作，因此请忽略它。

Answer 1

模态框位于您的 v-for...每次点击，都会打开所有模态(并且只能看到最后一个)

做这样的事情: https://codesandbox.io/s/simple-todo-app-with-vue-gx097

PS:如果没有 :key，v-for 可能会出现渲染问题... https://v2.vuejs.org/v2/api/?#key