Vuejs / javascript / 我正在尝试连接一个搜索栏来搜索我的表格并根据我的输入显示结果

Question

I'm trying to loop through each button within the search bar while displaying only the rows that match the input with filteredUsers .
I am getting the list of users from an AWS S3 bucket and then bringing that data into a table.

<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>

My 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;
      }
    }
  }
}

I am using the getList function on render

created() {
  this.getList();
}

I'd like some help on how I should handle this issue.

Answer 1

1st, You have to remove the @input on the textbox, Vue observability will trigger updates automatically.

2nd, filteredUsers() should be a computed property, not a method.

HTML changes

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();
}