Question

我已经完成了下面的代码，不适用于表中的过滤器。我收到了来自API的数据，当我尝试在搜索框中输入内容时，除标题外，表中什么都没有显示。请帮我在这里做错什么。

下面的代码在app.vue文件中。
这是表格：

<template>
  <div id="app">
    <h1>Quotes List</h1>
    <button class="button" v-on:click="getquotes()">Get Quotes</button>
    <br> <input v-model="filterInput">
    <br>
    <table class="table table-striped">
      <thead style="background-color:#22376f;color:#ffff;margin-top:20px">
        <th>QuoteNo</th>
      <th>CustomerName</th>
      <th>Revision</th>
      <th>QuoteAmount</th>
      <th>CustContact</th>
       <th>QuoteType</th>
       <th>Status</th>
       <th>ModifiedOn</th>
       <th>CreatedBy</th>
       <th>Owner</th>
       <th>ExpDate</th>
       <th>PriceList</th>

      </thead>
      <tbody>
      <tr  v-for="quote in filteredList()"  v-bind:key="quote.QuoteNo">
        <td>{{ quote.QuoteNo }}</td>
        <td>{{ quote.CustomerName }}</td>
        <td>{{ quote.Revision }}</td>
        <td>{{ quote.QuoteAmount }}</td>
        <td>{{ quote.CustContact }}</td>
        <td>{{ quote.QuoteType }}</td>
        <td>{{ quote.Status }}</td>
        <td>{{ quote.ModifiedOn }}</td>
        <td>{{ quote.CreatedBy }}</td>
        <td>{{ quote.Owner }}</td>
        <td>{{ quote.ExpDate }}</td>
        <td>{{ quote.PriceList }}</td>
      </tr>
       </tbody>
    </table>

  </div>
</template>

这是脚本：

<script>
export default {
  data: function() {
    return {
      // note: changing this line won't causes changes
      // with hot-reload because the reloaded component
      // preserves its current state and we are modifying
      // its initial state.
      msg: 'Welcome!',
      api: '',
      users: [],
      quotes:[],
      error: {},
      filterInput:''
    }
  },
  methods: {
    getquotes: function() {

      this.$http.get({
        url: '/quotes'
      }).then((response) => {
        this.quotes = response.data.result['rows']
        console.log(this.quotes)
      }, (response) => {
        this.error = response.data
      })
    },

  },
  computed: {
  filteredList() {
    const value= this.filterInput.charAt(0).toUpperCase() + this.filterInput.slice(1);
    return this.quotes.filter(function(quote){
      return  
        quote.QuoteNo.indexOf(value) > -1 ||
       quote.CustomerName.indexOf(value) > -1 ||
         quote.Revision.indexOf(value) > -1 ||
         quote.QuoteAmount.indexOf(value) > -1 ||
         quote.CustContact.indexOf(value) > -1 ||
         quote.QuoteType.indexOf(value) > -1 ||
         quote.Status.indexOf(value) > -1 ||
         quote.ModifiedOn.indexOf(value) > -1 ||
         quote.CreatedBy.indexOf(value) > -1 ||
         quote.Owner.indexOf(value) > -1 ||
         quote.ExpDate.indexOf(value) > -1 ||
         quote.PriceList.indexOf(value) > -1 
    });
  }
}
}
</script>

<style>
body {
  font-family: Open Sans, sans-serif;
}
</style>

Answer 1

更新的答案：

我已经创建了a working fiddle for you。有多个修复程序：

已删除filteredList()中模板中和输入事件中的括号。
在SELECT userId AS accountId, (SELECT recommended FROM ads_connections WHERE byUserId = accountId AND throughUserId = accountId AND adId = :recommendedAdId) AS recommended, -- (SELECT requestStatus FROM ads_recommends_requests WHERE userId = :currentUserId AND requestFromUserId = accountId AND advertisementId = :statusAdId) AS requestStatus, (SELECT COUNT(id) FROM ads_recommends_requests WHERE requestFromUserId = accountId AND advertisementId = :countAdId AND requestStatus = '1' ) AS recommendedTimes -- FROM user_contacts WHERE userId IN " . $myCircleString . " AND phoneNumber = :phoneNumber AND (SELECT fictive FROM users WHERE id = userId) = 0 ";方法中的语句周围添加了括号。

请记住，.indexOf() is case-sensitive。

表列的过滤器在vuejs中不起作用

1 个答案: