如何在从右面板更新用户信息的同时更新 VueJS 左面板用户列表

Question

我有一个 VueJS 应用程序，其中有一个用户列表和用户信息。

我正在使用两列布局，因此在左侧面板中我正在加载用户列表，当我点击任何用户时，用户信息将被加载到右侧面板。

我可以从右侧面板查看和编辑用户信息。 但更新的信息不会反映在左侧面板中。例如，如果我要编辑任何用户的名字和姓氏，那么它应该在左侧面板中更新，但我不知道如何在 VueJS 中进行。

index.vue

<template lang='pug'>
  two-col-layout(v-loading='loading', :show-edit-view='isAddOrEdit', default-text='Select Employee')
    template(slot='col-left-header')
      el-input(
        v-model='employeeSearchInput',
        placeholder='Search Employee by Name or Email',
        prefix-icon='el-icon-search',
      ).w-100.input-border-0

    template(slot='col-left-body')
      .fab.fab-rb
        el-tooltip(content='Add Employee')
          el-button(
            v-if='addUserPerm',
            type='success',
            circle,
            icon='el-icon-plus',
            @click='$router.push("/employees/new")',
          ).btn-fab

    template(slot='col-left-body-list')
      router-link(
        :key='employee.id',
        v-for='employee in filteredItems',
        :class='{ active: $route.params.employeeId === employee.id }',
        :to='`/employees/${employee.id}/edit`',
      ).list-group-item.list-group-item-action.d-flex.border-0
        .mr-11
          employee-avatar(
            v-if='employee.userPhoto',
            :image='employee.userPhoto',
          ).size-42
          employee-avatar(v-else, :email='employee.email').size-42
        .flex-1.d-none.d-md-block
          .fw-b {{ employee.firstName }} {{ employee.lastName }}
          .fs-14 {{ employee.email }}
          ul.list-unstyled.fs-14.mb-0
            li(v-for='team in employee.teams' :key='team.id').d-flex.mb-1
              .col-min-max.min-w-100.max-w-180
                | • {{ team.team.groupName }}
              .pl-3
                el-tag(
                  size='mini', :type='getRoleTagColor(team.role.roleName)'
                ).el-tag-for-role.fs-12
                  | {{ team.role.roleName }}
</template>

Edit.vue

<template lang='pug'>
  two-col-layout-edit(:loading-child='loadingChild', theme-color='#ffaeaf')
    template(slot='header-pic')
      employee-avatar(
        v-if='employee.userPhoto',
        @fileSelected='handleFileSelect($event)',
        :image='employee.userPhoto',
        show-uploader,
      ).size-100
      employee-avatar(
        v-else,
        :email='employee.email',
        @fileSelected='handleFileSelect($event)',
        show-uploader
      ).size-100

    template(slot='header-text') {{ employee.firstName }} {{ employee.lastName }}

    template(slot='main-content')
      el-form(
        ref='editEmployee', :model='employee', label-position='top', :rules='rules',
        @submit.prevent.native='validateEditEmpForm("editEmployee")'
      )
        h4.mb-4 Employee Information
        .row
          .col-md-6.col-xl-3
            el-form-item(label='First Name', prop='firstName')
              el-input(v-model='employee.firstName' :disabled="fncheckPerm()")
          .col-md-6.col-xl-3
            el-form-item(label='Last Name', prop='lastName')
              el-input(v-model='employee.lastName' :disabled="fncheckPerm()")
          .col-md-6.col-xl-3
            el-form-item(label='Email', prop='email' )
              el-input(v-model='employee.email' :disabled="fncheckPerm()")
          .col-md-6.col-xl-3
            el-form-item(label='Phone', prop='mobile' )
              el-input(v-model='employee.mobile' :disabled="fncheckPerm()")



    template(slot='footer-content')
      .col-auto
        el-button(type='danger', plain @click='removeUserConfirm()') Remove Employee
      .col-auto.ml-auto
        el-button(type='default' @click='cancelConfirm()') Cancel
        el-button(type='success' @click="validateEditEmpForm('editEmployee')") Save

    // things defined below will render in default slot
</template>

Answer 1

我认为你应该使用组件通信来实现你想要的。

Component communication with VueJS

在应用程序中，您在左侧面板上使用的数据来自您的父元素的道具（它是左右面板的父元素）。当您在右侧面板更新数据时，更新根数据，以便左侧面板会自动重新渲染更改的数据。

使用此方法，您的数据将始终在两个面板中同步:)

Pardon my paint :)

所以你的根有你的数据，用道具将它传递给左右孩子。当您在左侧面板中选择一个时，使用$emit 向父级发送消息，然后父级将更改传递给右侧元素的数据。 同样，当您保存新数据时，在右侧组件中执行此操作，向根发送消息，该消息将相应地更新左侧组件道具。

组件通信文档：

https://fr.vuejs.org/v2/guide/components.html

https://medium.com/js-dojo/component-communication-in-vue-js-ca8b591d7efa