vue.js 输入搜索以在用户列表中动态查找用户名答案

【问题标题】：vue.js input search to find username in dynamic in users listvue.js 输入搜索以在用户列表中动态查找用户名
【发布时间】：2017-10-17 03:15:10
【问题描述】：

我进行了输入搜索以过滤使用 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();
        }
    });
});

希望大家帮忙！ :)

【问题讨论】：

有什么方法可以将数据请求为数据，而不是让 PHP 将数据嵌入到 HTML 中并从中提取数据？它会更像 Vue-ish。
我不完全理解你对数据的意思：/
Vue 想要一个用户数组并在 HTML 中呈现他们的列表。但是用户只是作为 PHP 生成的一堆 HTML 存在，所以你必须从 HTML 中提取字符串来获取数据。 Vue 能够从服务器请求用户数据会好得多。
也许这里有帮助：stackoverflow.com/a/23740549/392102
啊，好吧，我明白你的意思了。不幸的是，这段代码已经用 PHP 实现了，所以我不能使用 $.ajax() 来请求内容：/

标签： javascript php jquery vue.js

【解决方案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变量。

【讨论】：