[Vuejs]-VueJS: JSON objects are not showing in my code

by

0👍

This will probably work, but it’s untested.

You generally do not want to use v-if inside of v-for; instead, you should filter the data first and use the result in the v-for loop. [reference]

Also, since each flat has an _id field, you can use that instead of the index for the top level :key attribute.

<div v-for="flat in flatsWithPayments" :key="flat._id">
  <div v-for="(installment, index) in getInstallmentsWithPaymentGTZero(flat.payment.installment_payment.installments)" :key="index">
    <p> {{installment.amount}}$ amount </p>
  </div>
</div>

Obviously, replace Flats with your data, but also note that in order to compare the payment amount, it needs to be converted with either Number(), parseInt() or parseFloat()

// Flats = { ... }

export default {
  computed: {
    flatsWithPayments() {
      return Flats.filter(f => f.payment != undefined)
    }
  },
  methods: {
    getInstallmentsWithPaymentGTZero(installments) {
      return installments.filter(i => Number(i.amount) > 0)
    }
  }
}

Leave a comment