时间戳

首页 > 解决方案 > 如何使用计算属性过滤 VueJS 中的 v-for 循环的结果？

javascript - 如何使用计算属性过滤 VueJS 中的 v-for 循环的结果？

问题描述

我正在尝试使用计算属性来过滤使用 v-for 循环时显示的结果。但是，我仍然可以在我的应用程序的 bar.js 中看到所有已清除的栏。我希望只看到一个，因为它设置为“真”。因此，我在哪里错了？欢迎任何帮助。

我正在关注https://medium.com/devmarketer/how-to-add-conditional-statements-to-v-for-loops-in-vue-js-c0b4d17e7dfd 

<li v-for="bar in bars" :key="bar.id">
    <h2>{{ bar.barName }}</h2>
</li> 


<script>
import bars from "./../data/bars";
export default {
  data() {
    return {
      bars:  bars
    };
  },
  computed: {
      bars: function() {
        return this.default.filter(function(u) {
          return u.newListing
      })
    }
  }
};
</script>

在一个名为 bar.js 的附加文件中，我有以下内容；

export default [
    {
        barName: "Mikes",
        newListing: true,
    },
    {
        barName: "Cheers",
        newListing: false,
    },
    {
        barName: "Biker Bar",
        newListing: false,
    }
];

标签： javascriptvue.jsvuejs2v-for

解决方案

您的代码中有两个bars，因此尚不清楚应该使用哪个模板。看起来它正在选择barsin data。您应该将计算属性重命名为唯一的，然后在模板中使用它。例如：

export default {
    data() {
      return {
        bars:  [/* your bar data goes here */]
      };
    },
    computed: {
        bars_filtered: function() {
          return this.bars.filter(u => u.newListing)
      }
    }
  };

然后在您的模板中，您将遍历bars_filtered：

v-for="bar in bars_filtered"

推荐阅读