我正在尝试根据对子组件的搜索来更新数据返回中的员工数组。 VueJS

Question

使用VueJS，我有一个名为EmployeeList的文件，该文件将BaseTable作为子组件导入，以基于名为info的数组列出员工（在这里我进行api调用以获取员工列表）。我能够实现一个搜索栏，使用筛选器功能可以成功搜索任何员工姓名。但是，信息数组不会更新以匹配搜索结果。因此，当我单击员工的唯一行以查看其信息时，将显示“信息”数组的原始顺序。

话虽如此，我将如何从同一文件的子组件中更新数组？

我尝试从实际的子组件文件中发出事件，但是它没有更新父数组。

EmployeeList和Child组件（基本表）

    <base-table 
    id="empTable"
    :data="info.filter(data => !search || 
    data.formattedName.toLowerCase().includes(search.toLowerCase()))" 
    :columns="columns" >
      <template slot="columns" > 
        <th>Full Name</th>
        <th>Work Email</th>
        <th>Title</th>
        <th> STATUS </th>
        <th class="text-right">Actions</th>
      </template>

      <template 
        slot-scope="{row}"
        v-if="
          typeof info != 'undefined' &&
          info != null &&
          info.length != null &&
          info.length > 0
           "
         >
       <td >
        <button class="buttonChange" @click="(t) =>viewInfo(t)">
           {{row.formattedName }} 
        </button>
       </td>
       <td>
        <button  class="buttonChange" @click="(t) =>viewInfo(t)">
           {{row.workEmail}}
        </button>
       </td>
        <td>
         <button  class="buttonChange" @click="(t) =>viewInfo(t)">
            {{row.title}}
         </button>
        </td>
        <td >
          <button  class="buttonChange" @click="(t) =>viewInfo(t)">
            {{row.activeORinactive}}
          </button>
        </td>
        <td class="td-actions text-right">
    <!-- Edit Employee -->
         <div id="wrapper">
          <base-button
            type="info"
            size="sm"
            icon
            class="animation-on-hover hover"
            @click="(e) =>editInfo(e)"
          >
            <i class="tim-icons icon-pencil"></i>  
          </base-button> 
           <p class="text">Edit</p>
         </div>
        </td>
      </template>

    </base-table> 

脚本

export default {
  components: {
    BaseTable,
    Modal,
    ModalView,

  },
  data() {
    return {
      columns: [],
      info: [],  
      infoModal: "",
      modal: false,
      modalView: false,
      refreshOnExit: 0,
      userEmail: null,
      signedIn: false,
      search: "", 
}  
  },
  methods: {
    async getList() {
      try { 
        const list = await axios.get(`MY API CALL`);
        this.info = list.data;
        this.info.sort(function(a, b) {
            var nameA = a.formattedName.toUpperCase(); 
            var nameB = b.formattedName.toUpperCase(); 
            if (nameA < nameB) {
              return -1;
            }
            if (nameA > nameB) {
              return 1;
            }
            // names must be equal
            return 0;
          });
      } catch (e) {
        console.log(`getList`, e);
        if (e.response.status === 400) {
          this.error = e.response.data.message;
        }
      }
    },
    editInfo(e) {
      const tr = e.target.parentNode.parentNode.parentNode.parentNode.getAttribute("id");
      this.infoModal = this.info[tr];
      this.modal = true;
    },
    viewInfo(t) {
      const rw = t.target.parentNode.parentNode.getAttribute("id");
      this.infoModal = this.info[rw];
      this.modalView = true;
    }