CODEWITHSUNDEEP
javascriptvue.jsvuejs2v-for
Al-76
Al-76

Reputation: 1868

How do I filter the results of a v-for loop in VueJS with a computed property?

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,
    }
];

Upvotes: 0

Views: 1180

Answers (1)

Mark
Mark

Reputation: 92440

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"

Upvotes: 2

Related Questions