表列的筛选器在vuejs中不起作用。

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

最新答复：

我创建了为你工作的小提琴。有多个修复方法：

• 删除v-for中的模板和输入事件中的括号。
• 在filteredList()方法中添加了语句周围的括号。

请记住，区分大小写。