在 Vue 中过滤表格

Question

我正在尝试创建一个呈现多个引号并允许您搜索数据的 Vue 应用程序。我想也许我没有将函数绑定到正确的元素。我在输入标签上有一个 v-model 属性，所以它应该绑定用户输入的任何文本。

这是我的模板：

<template>
  <div class="container">
    <h3>Quotes</h3>
    <div class="controllers">
      <div class="search">
         <input id="search-item" type="text" placeholder="Search for a quote..." v-model="searchText"/>
         <button @click="searchResults()" class="search-btn">Search</button>
      </div>
    </div>
    <table class="table">
      <thead>
        <tr>
          <th scope="col">Source</th>
          <th scope="col">Context</th>
          <th scope="col">Quote</th>
          <th scope="col">Theme</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="quote in quotes" v-bind:key="quote.quote"> 
          <th scope="row">{{quote.context}}</th>
          <td>{{quote.source}}</td>
          <td>{{quote.quote}}</td>
          <td>{{quote.theme}}</td>
        </tr>
      </tbody>
    </table> 
  </div> 
</template>

这是我的脚本

  import axios from 'axios';
  export default {
    name: 'Quotes',
    data() {
      return {
        searchText: '',
        // search: null,
        // data: null,
        quotes: [ 
          {
            quote: null,
            context:  null,
            source: null,
            theme: null,
            currentPage: 0,
        }
        ],
      };
    },
    mounted() {
      axios
        .get('https://gist.githubusercontent.com/benchprep/dffc3bffa9704626aa8832a3b4de5b27/raw/quotes.json')
        .then(res => {
          this.quotes = res.data;
        })
      },
    methods: {
      searchResults() {
        if (this.searchText.length === 0) {
        return '';
      }
      return this.quotes.filter(quote => quote.quote.match(this.searchText));
     },
  }
}

当我尝试实现搜索时，该功能不起作用。我在编译器中没有收到任何错误。

Answer 1

问题出在searchResults() 函数上，因为它仅过滤this.quotes 并返回此值，但未使用此值，因此对象this.quotes 继续使用初始值。我建议您在调用函数searchResults() 时更新this.quotes，但记得保存初始结果。

最好的方法是使用计算变量返回 this.quotes 在需要时过滤。见https://vuejs.org/v2/guide/computed.html#Computed-Properties

Answer 2

你的方法不对应该是：

    searchResults() {
        if (this.searchText.length == 0 || this.searchText == '') return;
        this.quotes = this.quotes.filter(quote => quote.quote.match(this.searchText));
    }

您不需要return this.quotes，而是更改数组。但这会导致数组清空，因此您应该在原始数组中使用另一个变量。

这样更好：

    import axios from 'axios';
    export default {
        data() {
            return {
                searchText: "",
                quotes: [],
                data: [],
            };
        },
        mounted() {
            this.fetchQuotes();
        },
        methods: {
            fetchQuotes() {
                let url = 'https://gist.githubusercontent.com/benchprep/dffc3bffa9704626aa8832a3b4de5b27/raw/quotes.json/';
                axios.get(url).then(res => {
                    this.quotes = res.data;
                    this.data = res.data;
                });
            },
            searchResults() {
                if (this.searchText.length == 0 || this.searchText == '') {
                    this.quotes = this.data;
                }
                this.quotes = this.data.filter(quote => quote.quote.includes(this.searchText));
            }
        }
    }