Vuejs / javascript / Я пытаюсь подключить панель поиска, которая выполняет поиск в моей таблице и отображает результаты в соответствии с моими данными

Question

Я пытаюсь перебрать каждую кнопку в строке поиска, отображая только те строки, которые соответствуют вводу с filteredUsers.
Я получаю список пользователей из корзины AWS S3 и затем извлекаю эти данныев стол.

<div>
  <div id="main">
    Search: <input type="text" @input="filteredUsers" v-model="search" />
    <base-table id="empTable" :data="info" :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="filteredUsers &&
        typeof info != 'undefined' &&
        info != null &&
        info.length != null &&
        info.length > 0
        " id="table">
        <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>

Мой Javascript

data() {
  return {
    columns: [],
    info: [],
    infoModal: "",
    modal: false,
    modalView: false,
    refreshOnExit: 0,
    error: "",
    name: '',
    search: " ",
  }
},
methods: {
  filteredUsers() {

    return this.info.filter((user) => {
      return info.formattedName.match(this.search);

    })


  },
  async getList() {
    try {
      const list = await axios.get(`MyRequest`);
      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;
      }
    }
  }
}

Я использую функцию getList при рендеринге

created() {
  this.getList();
}

Я хотел бы получить некоторую помощь о том, как я должен обрабатыватьэта проблема.

Answer 1

1-й, Вы должны удалить @input в текстовом поле, наблюдаемость Vue будет запускать обновления автоматически.

2-й, FilterUsers () должен быть свойством computed, а не методом.

HTML-изменения

Search: <input type="text" v-model="search" />
<base-table id="empTable" :data="filteredUsers" :columns="columns">
...
 <template
    slot-scope="{row}"
    id="table">

Javascript

data() {
    return {
        columns: [],
        info: [],
        infoModal: "",
        modal: false,
        modalView: false,
        refreshOnExit: 0,
        error: "",
        name: '',
        search: " ",
    };
},
computed: {
    filteredUsers() {
        if (!(this.info && this.info.length)) return []; //return empty if no info[]
        return this.info.filter((user) => {
            return user.match(this.search);
        });
    },
},
methods: {
    async getList() {
        try {
            const list = await axios.get(`MyRequest`);
            this.info = list.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;
            }
        }
    }
},
created() {
     this.getList();
}