VueJS Computed Property List Filter

I’m having trouble using the filter. how do I apply a filter to show the list only when lat and lon are different from 0? those that are equal to 0 does not appear in the list. I tried to use the computed, something like this:

 computed: {
roles () {

  return this.properties.filter(properties => properties.address.geoLocation.location.lat !== 0 )
}
  }

exemple de data:

```
{
  "properties": [
    {
      "usableAreas": 70,
      "listingType": "USED",
      "createdAt": "2017-04-22T18:39:31.138Z",
      "listingStatus": "ACTIVE",
      "id": "7baf2775d4a2",
      "parkingSpaces": 1,
      "updatedAt": "2017-04-22T18:39:31.138Z",
      "owner": false,
      "images": [
        "https://resizedimgs.vivareal.com/crop/400x300/vr.images.sp/f908948bf1d9e53d36c4734d296feb99.jpg",
        "https://resizedimgs.vivareal.com/crop/400x300/vr.images.sp/bd37e4c09ddd370529489fbbc461dbec.jpg",
        "https://resizedimgs.vivareal.com/crop/400x300/vr.images.sp/7b86204f34b751c432c878d607c9d618.jpg",
        "https://resizedimgs.vivareal.com/crop/400x300/vr.images.sp/3b1142cffc13c49a1e7ea766c20a1d52.jpg",
        "https://resizedimgs.vivareal.com/crop/400x300/vr.images.sp/f519a27d56696febfb77f6398f4484d8.jpg"
      ],
      "address": {
        "city": "",
        "neighborhood": "",
        "geoLocation": {
          "precision": "NO_GEOCODE",
          "location": {
            "lon": 0,
            "lat": 0
          }
        }
      },
      "bathrooms": 1,
      "bedrooms": 2,
      "pricingInfos": {
        "yearlyIptu": "60",
        "price": "276000",
        "businessType": "SALE",
        "monthlyCondoFee": "0"
      }
    }]

methods:

      methods: {
        getProperties() {
          console.log(this.$route.params.id);
          this.$http
            .get(`properties?_page=${this.page}&_limit=${this.limit}`)
            .then(res => {
              this.properties = this.properties.concat(res.data);
              this.page++;

              if (res.data.length === 0) this.loadMore = false;
              console.log(this.properties);
            });
        }
      },
    ```

template:

<ul v-for="(property, i) in roles" :key="`${i}-${property.id}`">
  <li>
    <PropertyItem :property="property" :lazyImage="lazyImage" />
  </li>
</ul>
computed: {
  roles () {
    return this.properties.filter(properties => (
      properties.address.geoLocation.location.lat !== 0 &&
      properties.address.geoLocation.location.lon !== 0
    ))
  }
}
1 Like