Javascript-Vue，无法使搜索筛选器在对象数组上工作_Javascript_Vue.js

Javascript-Vue，无法使搜索筛选器在对象数组上工作

javascript vue.js

Javascript-Vue，无法使搜索筛选器在对象数组上工作,javascript,vue.js,Javascript,Vue.js,我试图在此处复制此代码，并将其用于我的项目：这是我的javascript文件，请忽略“测试”数据 var app = new Vue ( { el: '#main', data: function () { return { search: '', customers: [ { id: 1, org: 'OOC', vendor

我试图在此处复制此代码，并将其用于我的项目：

这是我的javascript文件，请忽略“测试”数据

var app = new Vue
  (
  {
    el: '#main',
    data: function ()
    {
      return {
        search: '',
        customers: [
          {
            id: 1,
            org: 'OOC',
            vendor: '1',
          },

          {
            id: 2,
            org: 'Golf 123Test',
            vendor: '@aboutTest',
          },

          {
            id: 3,
            org: 'AdvanceWaTest',
            vendor: '@actuTest',
          },

          {
            id: 4,
            org: 'Test4',
            vendor: 'Test3345',
          }

        ]
      };

    },

    computed:

    {
      filteredCustomers: function ()
      {
        var self = this;
        return this.customers.filter(function (cust)
        {
          return
          cust.vendor.toLowerCase().indexOf(self.search.toLowerCase()) >= 0;

        });
      }
    }


  }


  );

这是我的html代码，它在html正文中，我去掉了很多html，因为我认为只有以下内容应该是相关的：

    <!DOCTYPE html>
<html>

<head>
  <link rel="icon" href="langleylogo.png">
  <link href='style.css' rel='stylesheet' type='text/css'>
  <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
    crossorigin="anonymous">
  <meta charset="UTF-8">


  <title>Langley</title>


</head>




<body>



  <div id="main">
    <div class="parent">
      <div class="left">
        <div class="blueTop">
          <input type="text" v-model="search" class="orgSearch" placeholder="Client  |  ToDo  |  Ticket">
        </div>
        <div class="leftMiniContainer">


          <template v-for="customer in filteredCustomers">
            <div class="clientSearchCard">
              <div class="orgVendor">V:</div>
              <div class="clientSearchCardValue">{{ customer.vendor }}</div>
              <br>
              <div class="orgVendor">O:</div>
              <div class="clientSearchCardValue">{{ customer.org }}</div>
            </div>
          </template>
        </div>

      </div>



      <div class="right ">

        <div class="right-nav ">
          <a href="index.html " class="selected ">
            <i class="header-glyph fa fa-home " aria-hidden="true "></i> Overview
          </a>

          <a href="status.html ">
            <i class="header-glyph fa fa-check-square-o " aria-hidden="true "></i> Status
          </a>

          <a href="client.html ">
            <i class="header-glyph fa fa-address-card " aria-hidden="true "></i> Client
          </a>

          <a href="ticket.html ">
            <i class="header-glyph fa fa-ticket " aria-hidden="true "></i> Ticket
          </a>

          <a href="todo.html ">
            <i class="header-glyph fa fa-list " aria-hidden="true "></i> To Do
          </a>

          <a href="files.html ">
            <i class="header-glyph fa fa-file-image-o " aria-hidden="true "></i> Files
          </a>

          <a href="features.html ">
            <i class="header-glyph fa fa-wrench " aria-hidden="true "></i> Features
          </a>

          <div class="right-nav-config ">
            <a href="config.html ">
              <i class="fa fa-user-circle " aria-hidden="true "></i>
            </a>
          </div>


        </div>
        <div class="clientListWrapper ">

        </div>
      </div>


    </div>



  </div>




  <script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>
  <script src="app.js"></script>


</body>

</html>


兰利
五:
{{customer.vendor}}


O:
{{customer.org}

我可以很好地显示整个对象数据数组，但我不能让它只显示输入到文本框中的数据。

js中有一个黑色，如果删除它，代码将正常工作

错误图片如下

你的输入在哪里？补充说in-在一个更高的div中，我忘了包括在内。Thanks@MattBerry在

v-for

数组元素别名中，您编写了

client

而不是

customer

。您应该在控制台中看到一个错误，指出属性

customer

未在实例上定义，而是在呈现过程中引用的。要么将

customer.vendor

和

customer.org

更改为

client.vendor

和

client.org

，要么在

v-for

指令中将别名更改为

customer

。仍然无法使其工作，如果有帮助，我已经添加了完整的html页面我明明给了正确答案，为什么给我-1.分，我要投诉。