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

Question

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

我正在关注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>

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

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

Answer 1

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

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="bars_filtered"