Question

从Spring后端重新加载后，带有JSON对象的Vue.js数组中的数据会混合在一起。

我正在尝试使用Vue.js制作前端，以在Spring后端上编辑数据。 Vue.js使用axios调用后端，它返回使用v-for在页面上呈现的项目列表。可以单独编辑这些项目，单击某个项目的“保存”按钮后，该项目将发送到后端，并且数据将在数据库中更新。此后，当我在浏览器中单击“重新加载”（或关闭并打开同一页面）时，数据已从服务器重新加载，但混合起来了。

loadExercises(){     
           axios({url:'http://localhost:5000/exercises/all'}).then(resp => {
                    this.exercises = resp.data;
                })
            }

这是加载数据的功能。

这是原始数组：https://imgur.com/5x8TiwY

这是重新加载后的数组，我编辑了第一项：https://imgur.com/d6G4SMm

后端返回正确的对象，唯一的不同是编辑的条目是数组中的最后一个条目（在示例案例中，它是编辑之前的第一个条目）。保存期间id不会改变，只是详细信息会更新，例如名称或描述。

这是生成html的模板的一部分，以防万一是因为其中有东西。

<div role="tablist" id="container" v-bind:key="ex.id" v-for="ex in exercises">
            <b-card no-body class="mb-1 customcard">
                <b-card-header header-tag="header" class="p-1 alignleft" role="tab"  v-b-toggle="`accordion${ex.id}`">
                    <span>{{ex.name}}</span>
                </b-card-header>
                <b-collapse v-bind:id="`accordion${ex.id}`" accordion="my-accordion" role="tabpanel">
                    <b-card-body class = "alignleft">
                        <p class="card-text">
                            Name: <b-form-input
                                v-bind:value="`${ex.name}`"
                                v-bind:id="`input${ex.id}`"
                                v-on:input="saveExName(ex.id)"></b-form-input>
                            Target: {{ex.target}} <b-form-select v-on:input="onTargetChange(ex.id)"
                                                                 v-bind:id="`target${ex.id}`" >
                            <option v-bind:key = "target" v-for="target in targets" :value="target" >{{target}}</option>

                            </b-form-select>
                            Description: <b-form-textarea
                                v-bind:value="`${ex.description}`"
                                :rows="3"
                                :max-rows="6"
                                v-on:input="saveExDesc(ex.id)"
                                v-bind:id="`textarea${ex.id}`"></b-form-textarea>
                        </p>
                        <div class="alignright">
                            <b-button v-on:click="saveExUpdate(ex.id)">Save</b-button>
                        </div>

                    </b-card-body>
                </b-collapse>
            </b-card>
        </div>

有任何想法为什么会这样？

重新加载数据后Vue.js数组混合

0 个答案: