Question

我正在尝试使用计算属性来过滤使用v-for循环时显示的结果。但是，我仍然可以在应用程序的bar.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

您的代码中有两个bars，因此尚不清楚应使用哪个模板。看来它在bars中选择了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"

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

1 个答案: