Vue JS Filter

filter.vue

<template>
  <div class="container">
    <h1>Hello</h1>
    <input type="text" placeholder="Filter by name or type" v-model="filter" />
    <table>
      <thead>
        <tr>
          <th>name</th>
          <th>type</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, index) in filteredRows" :key="`name-${index}`">
          <!-- <td v-html="highlightMatches(row.name)"></td>
          <td v-html="highlightMatches([...row.type].sort().join(', '))"></td> -->
          <td v-html="(row.name)"></td>
          <td v-html="([...row.type].sort().join(', '))"></td>
        </tr>
      </tbody>
    </table>

  </div>
</template>

<script>
import Logo from '~/components/Logo.vue'
import { provisions } from '../static/employees'

export default {
  data() {
    return {
      filter: "",
      rows : provisions
      /****
        export const  provisions = [
          {
            name: "Roots PBC",
            type: 'Vegan',
            neighborhood: 'Westside',
            address: '2051 Metropolitan Pkwy',
            url: 'https://www.rootspbc.com/menu',
            link: 'menu/order',
            image: 'https://s3-media0.fl.yelpcdn.com/bphoto/eHfN7nd-7fpp93ivon9gYw/o.jpg',
          },
          {
            name: "Desta Ethiopian Kitchen",
            type: 'Ethiopian',
            neighborhood: 'Eastside',
            address: '3086 Briarcliff Rd NE',
            url: 'https://destaethiopiankitchen.com/atlanta-druid-hills-desta-ethiopian-kitchen-food-menu',
            link: 'menu/order',
            image: 'https://s3-media0.fl.yelpcdn.com/bphoto/ubdZEz867Suv6ByrMvo15w/o.jpg',
          },
        ]
      ****/
    }
  },
  // methods: {
  //   highlightMatches(text) {
  //     const matchExists = text
  //       .toLowerCase()
  //       .includes(this.filter.toLowerCase());
  //     if (!matchExists) return text;

  //     const re = new RegExp(this.filter, "ig");
  //     return text.replace(re, matchedText => `<strong>${matchedText}</strong>`);
  //   }
  // },
  computed: {
    filteredRows() {
      return this.rows.filter(row => {
        const type = row.type.toString().toLowerCase();
        const name = row.name.toLowerCase();
        const searchTerm = this.filter.toLowerCase();

        return (
          name.includes(searchTerm) || type.includes(searchTerm)
        );
      });
    }
  }
}
</script>