I am trying to use a computed property in order to filter the results that are being displayed when using a v-for loop. However, I still see all the bars that are decleared in my bars.js on my application. I was expecting to only see one as it is set to 'true'. Therefore, where am I goinf wrong? Any help welcome.

I am following 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>

In an additional file called bars.js I have the following;

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

1 Answers

2
Mark Meyer On

You have two bars in your code, so it's not clear which the template should use. It looks like it's opting for the bars in data. You should rename the computed property to something unique and then us that in the template. For example:

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

Then in your template you would loop over bars_filtered:

v-for="bar in bars_filtered"