javascript - 每次动作发生时如何让Vue从数据库中获取数据？

问题描述

我在每一行旁边都有一个按钮，每一行在数据库中都有不同的条目。单击该按钮后，我设法获得了希望出现在 Bootstrap 模态中的信息。我仍在努力确保每次点击时 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;
        }

这种方法的灵感来自SO 上的这个答案。但我可能误解了它。目前的情况是，当我单击按钮时，它显示该somePropety实体的，但是当您单击另一个实体时，它仍然显示相同的属性，而它应该刷新（即获取不同的数据）。

这些是一些图片，以使其清楚：

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

编辑：为了清楚起见，test应该已经在propety1/2/3/4但还没有设法让它工作，所以请忽略它。

标签： javascriptvue.jsvuejs2

javascript - 每次动作发生时如何让Vue从数据库中获取数据？

问题描述

解决方案

推荐阅读