javascript - Need to bind v-model and ref

Question

just dealing with vue js. Need to bind v-model to input which is output through v-for with refs. I made a search in table, so that you can do a search on each attribute, but the v-model when outputting input is the same for everyone

<template>
  <table>
    <thead>
      <tr>
        <th v-for="(el, index) in tableHeader" :key="index">
          <input type="text" v-model="tableHeader[index]" @keyup="searchFilter"/>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr class="table__row" v-for="trainer in trainers" :key="trainer.id">
        <td ref="id">{{ trainer.id }}</td>
        <td ref="name">{{ trainer.fullname }}</td>
        <td ref="email">{{ trainer.email }}</td>
        <td ref="language">{{ trainer.language }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  name: "AdminTable",
  props: {
    tableHeader: {
      type: Array,
      required: true,
    },
    trainers: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      searchValue: "",
    };
  },
  methods: {
    searchFilter() {
      const val = this.searchValue;
      const tableText = this.$refs.id;
      if (val != "") {
        tableText.forEach((table) => {
            const tableRow = table.closest('.table__row');
            console.log(tableRow);
          if (table.textContent.toLowerCase().search(val.toLowerCase()) == -1) {
            tableRow.style.display = "none";
          } else {
            tableRow.style.display = "table-row";
          }
        });
      }
    },
  },
};
</script>

question from:https://stackoverflow.com/questions/65922126/need-to-bind-v-model-and-ref

Answer 1

Waitting for answers