Vue js：根據多個屬性搜索過濾器無法正常工作

Question

我在 Vue js 中有一個搜索功能，用於搜索來自 API 的數據，它適用於單個數據項（ question.questionTitle ），但我的問題是我無法弄清楚如何將它應用於所有數據，如question.name ， question.desc ...有沒有辦法做到這一點？

 <template> <ul class="container-question" v-for="(question, index) in questions":key="index" > <div v-for="(questions,index) in filteredList":key="index">...... </div> </ul> </template> <script> filteredList() { return this.questions.filter(question => { return question.questionTitle.includes(this.search) }) } </script>

Answer 1

您可以使用|| 檢查其他字段中的搜索結果：

 new Vue({ el:"#app", data() { return { search: '', questions: [ { questionTitle: "title1", name: "name1", desc: "desc1", categories: [ { category_name: "category1a" }, { category_name: "category1b" } ] }, { questionTitle: "title2", name: "name2", desc: "desc2", categories: [ { category_name: "category2a" }, { category_name: "category2b" } ] }, { questionTitle: "title3", name: "name3", desc: "desc3", categories: [ { category_name: "category3a" }, { category_name: "category3b" } ] } ] } }, computed: { filteredList() { const search = this.search; return search===''? this.questions: this.questions.filter(question => question.questionTitle.includes(search) || question.name.includes(search) || question.desc.includes(search) || question.categories.some(category => category.category_name.includes(search) ) ) } } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div class="search-wrapper"> <label>Search title:</label> <input type="text" v-model="search" placeholder="Search title.."/> </div> <ul class="container-question"> <li v-for="(question,questionIndex) in filteredList":key="questionIndex"> {{question.questionTitle}} - {{question.name}} - {{question.desc}} <div class="category" v-for="(allCategories, categoryIndex) in question.categories" v-bind:key="categoryIndex" > <mark> {{ allCategories.category_name }} </mark> </div> </li> </ul> </div>