[Vuejs]-Vue.js input search to find username in dynamic in users list

by

0👍

Since you’re stuck with PHP generating stuff, probably the best you can do is make each row a component. The HTML will look about like this:

<div id="users" name="users">
  <?php if(!empty($user)) { 
          foreach($user as $value)  { 
  ?>
  <user-component
   name="<?php echo ucfirst($value->username);?>"
   id="<?php echo $value->id;?>"
   :match-pattern="searchPattern"
  ></user-component>
  <?php    } 
         }
  ?>
</div>

The template for your component will look about like this:

  <div v-show="matches()" class="row oddEven usersElements userid" style="margin-top: -1vw;">
    <div v-on:click="displayAgregators(id)" class="col-md-10">
      <span>{{name}}</span>
    </div>
    <div class="col-md-2">
      <div class="colorsByUser" :style="{backgroundColor: randomColor()}"></div>
    </div>
  </div>

and it will take three props: name and id come from the PHP stuff, while match-pattern comes from your parent Vue. it will have a method (or a computed) that tests whether it matches the pattern. Something like

matches() {
  return this.name.toLowerCase().includes(this.matchPattern);
}

Your search bar should have v-model="searchPattern", and you should of course define a searchPattern variable in your Vue.

👤Roy J

Leave a comment