javascript - vue.js 输入搜索在用户列表中动态查找用户名

Question

我进行了输入搜索来过滤使用 PHP 调用的用户列表。我正在尝试在 Vue.js 中实现过滤器，以便当我搜索名称时，用户会在列表中显示为已过滤。

这是搜索栏 HTML:

<div class="row" id="toprow">
          <div class="col-md-6">
              <div id="titlerow1">Users</div>
          </div>

          <div class="col-md-6">
                  <input class="searchbar" id="search1" placeholder="Search..."></input>
          </div>
</div> 

用户列表 HTML:

<div id="users" name="users">
                        <?php   if(!empty($user))
                        { 
                            foreach($user as $value) 
                            { 
                            ?>
                                <div class="row oddEven usersElements userid" id=<?php echo $value->id;?> style="margin-top: -1vw;">
                                    <div v-on:click="displayAgregators(<?php echo $value->id;?>)" class="col-md-10">
                                        <span id="items<?php echo $value->id;?>"><?php echo ucfirst($value->username);?></span>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="colorsByUser" :style="{backgroundColor: randomColor()}"></div>
                                    </div>
                                </div>
                            <?php } 
                        }?>
                    </div>

在使用 jQuery 之前，代码如下:

$('#search1').keyup(function() {
    var string1 = $(this).val().toLowerCase();
    console.log("str1=" + string1);
    $(".usersElements").each(function(index) {
        var string = $(this).attr('id');
        var string2 = $('#' + string).text().toLowerCase();
        console.log("str2=" + string2);
        var valtest = string2.indexOf(string1);
        console.log("index value:" + valtest);
        if (valtest >= 0) {
            $('#' + string).show();
        } else {
            $('#' + string).hide();
        }
    });
});

希望大家能够帮忙! :)

Answer 1

由于您受制于 PHP 生成内容，因此您能做的最好的可能就是使每一行成为一个组件。 HTML 看起来像这样:

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

您的组件的模板将如下所示:

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

它需要三个属性:name和id来自PHP的东西，而match-pattern来自你的父Vue。它将有一个方法(或计算方法)来测试它是否与模式匹配。类似的东西

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

你的搜索栏应该有 v-model="searchPattern"，你当然应该在你的 Vue 中定义一个 searchPattern 变量。