我无法在 vue.js 中对数组实现过滤器

Question

我已经找了很长一段时间了，但作为一个新手，我找不到答案。我想用我认为语法错误的属性 id 来过滤我的数组。感谢您的帮助成分export default {  props: ["user", "recette"],  data() {    return { email: this.$route.params.email };  },  components: {},  methods: {},  computed: {    filteredItems: function () {      return this.recette.filter((recettes) => {        return recettes.cat_recetteId === 1;      });    },  },};看法<template>  <div>    <myrecette :recette="recette"/>    <myfooter />  </div></template><script>import myrecette from "../components/recette";import myfooter from "../components/myfooter";export default {  name: "",  data() {    return {      recette: "",      user: "",    };  },  components: {    myrecette,    myfooter,  },  created: function() {    this.axios.get("http://localhost:3000/recette/all_recette/").then((res) => {      (this.recette = res.data.recette),        this.axios          .get(            "http://localhost:3000/user/rec_user/" + this.$route.params.email          )          .then((res) => {            this.user = res.data.user;          });    });  },};</script><style scoped></style>节点router.get("/all_recette", (req, res) => {    db.recette        .findAll({            include: { all: true },        })        .then((recette) => {            if (recette) {                res.status(200).json({                    recette: recette,                });            } else {                res.json("il n'y a pas de recettes");            }        })        .catch(err => {            res.json(err);        });});这是我的完整代码以及我的节点路线。我的错误返回是vue.runtime.esm.js?2b0e:619 [Vue warn]: 渲染错误：“TypeError: this.recette.filter 不是函数”

Answer 1

该过滤器的工作原理是保留返回 的项目true，因此如果您希望所有项目的 a 均为cat_recetteId1，则可以将其更改为：

computed: {

  filteredItems: function() {

    if (!this.recette) return [];

    return this.recette.filter((recettes) => {

      return recettes.cat_recetteId === 1;

    });

  },

},

在大多数情况下，在计算内部使用箭头函数也是一种很好的做法。

Answer 2

您的过滤器回调函数应返回true或false。您 1) 不返回任何内容，2) 分配一个值 (=)，而不是进行比较 (==/===)。

computed: {

    filteredItems: function() {

      return this.recette.filter(function(recettes) {

        return recettes.cat_recetteId === 1;

      });

    },

  },