Javascript-Vue，无法使搜索过滤器在对象数组上运行

Question

我正在尝试将此代码复制到此处，并在我的项目中使用它： http : //jsfiddle.net/dkmmhf5y/701/

这是我的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>

我可以很好地显示对象数据的整个数组，但是我不能仅仅显示在文本框中键入的数据。

Answer 1

js中有黑色，如果删除它，代码将正常运行错误图片如下https://i.stack.imgur.com/tClzp.png

Javascript-Vue，无法使搜索过滤器在对象数组上运行

问题描述

1 个解决方案

解决方案1
-1 2018-08-10 07:28:44

Javascript-Vue，无法使搜索过滤器在对象数组上运行

问题描述

1 个解决方案

解决方案1 -1 2018-08-10 07:28:44

解决方案1
-1 2018-08-10 07:28:44