我无法在 vue.js 中为我的数组实现过滤器答案

【问题标题】：I cannot implement a filter to my array in vue.js我无法在 vue.js 中为我的数组实现过滤器
【发布时间】：2020-12-12 19:11:08
【问题描述】：

我一直在寻找很长一段时间，但作为一个新手我找不到答案。我想用我认为语法错误的属性的 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 警告]：渲染错误：“TypeError：this.recette.filter 不是函数”

【问题讨论】：

请分享您的整个脚本

标签： javascript vue.js vuejs2 vue-component vue-reactivity

【解决方案1】：

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

computed: {
  filteredItems: function() {
    if (!this.recette) return [];
    return this.recette.filter((recettes) => {
      return recettes.cat_recetteId === 1;
    });
  },
},

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

【讨论】：

【解决方案2】：

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

computed: {
    filteredItems: function() {
      return this.recette.filter(function(recettes) {
        return recettes.cat_recetteId === 1;
      });
    },
  },

【讨论】：