我无法在 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: {&nbsp; filteredItems: function() {&nbsp; &nbsp; if (!this.recette) return [];&nbsp; &nbsp; return this.recette.filter((recettes) => {&nbsp; &nbsp; &nbsp; return recettes.cat_recetteId === 1;&nbsp; &nbsp; });&nbsp; },},在大多数情况下，在计算内部使用箭头函数也是一种很好的做法。

Answer 2

您的过滤器回调函数应返回true或false。您 1) 不返回任何内容，2) 分配一个值 (=)，而不是进行比较 (==/===)。computed: {&nbsp; &nbsp; filteredItems: function() {&nbsp; &nbsp; &nbsp; return this.recette.filter(function(recettes) {&nbsp; &nbsp; &nbsp; &nbsp; return recettes.cat_recetteId === 1;&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; },&nbsp; },