Question

我创建了一个过滤器函数，我想显示结果。这是代码

    data() {
        return {
            questionList: faqData.flatMap(q => q.questions)
        }
    },
    computed: {
        search() {
            return this.$store.state.search
        },
        filter: function() {
            this.questionList.filter((x) => {
                return x.question.match(this.search);
            })
        }
    }

questionList 变量和 search() 函数没有问题。我认为问题出在 filter() 函数中。无论如何，这是我的问题列表

[{id: 1, question: 'blabla', answer: 'blabalbla'}, {id: 2, question: 'blabla', answer: 'blabalbla'}, {id: 3, question: 'blabla', answer: 'blabalbla'} ]

过滤器函数显示一个空数组。谁能告诉我我哪里做错了？谢谢！

Answer 1

计算属性的值由它们的函数返回的内容定义。

就您而言，undefined 因为 filter: function() { 不返回任何内容。

在计算属性函数中分配状态变量根本不是一个好主意！

正确的做法是：

    filter: function() {
        return this.questionList.filter((question) => {
            return question.title.match(this.search);
        })
    }

Answer 2

<template>
  <div class="hello">   
    <div>
      <p v-for="(item, index) in filt" :key="index">
        {{item.question}}
      </p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      questionList: faqData.flatMap(q => q.questions)
    }
  },
  computed: {
        search() {
            return this.$store.state.search;
        },
        filt: function() {
            return this.questionList.filter((x) => {
                return x.question.match(this.search);
            })
        }
    }
}
</script>

vuejs 过滤器函数显示一个空数组

2 个答案: