CODEWITHSUNDEEP
vue.js
sara97
sara97

Reputation: 401

Vuejs: button appears multiple times in my code

in my below code, I have data from API and I view them using nested v-for loop, my problem is whenever I add a button inside the v-for it's added multiple times depending on loop data so if have 3 installment data it repeats 3 times and so on. Is there a way to make it appear only once?

PS: I tried to add button outside the loop and put a v-if="filteredlist.payment.installment_payment" but it gives me error undefined installment_payment of payment

<b-card-body
  class="px-lg-5 py-lg-5"
  v-for="flat in filteredList"
  :key="flat._id"
  v-show="flat.status=='sold'"
>
  <div class="text-center text-muted mb-4">
    <h2>name : {{flat.buyer}}</h2>
    <h3>flat ({{flat.flat_number}})</h3>
    <span v-for="(building,index) in buildings" :key="index">
      <h3 v-if="building._id.includes(flat.building)">
        {{building.building_number}} building
      </h3>
    </span>
    <h4>city: {{flat.city}}</h4>
    <h4 class="mb-5">price: ${{flat.price}}</h4>

    <div v-for="find in flat.payment" :key="find._id">
      <div v-if="flat.payment.installment_payment">
        <div v-for="(inst, index2) in find.installments" :key="index2">
          <b-row>
            <b-col>
              <h4
                :class="{ 'text-red': currentDate > inst.date, 'text-green': currentDate == inst.date}"
              >
                {{inst.amount}}$
              </h4>
            </b-col>

            <b-col>
              <h4
                :class="{ 'text-red': currentDate > inst.date, 'text-green': currentDate == inst.date}"
              >
                {{inst.date}}
              </h4>
            </b-col>
          </b-row>
          <b-button :to="`/EditFlat/${flat._id}`"> edit </b-button> //button
          repeated
        </div>
      </div>
      <div v-if="flat.payment.cash_payment">
        <h4>{{find.paid_amount}}$</h4>
        <h4>{{find.date}}</h4>
      </div>
    </div>
  </div>
</b-card-body>

Upvotes: 1

Views: 119

Answers (1)

Anatoly
Anatoly

Reputation: 22758

If this button should be used to edit flat object then you need to keep the button on the v-for level of flat in filteredList and use v-if checking the certain flat object props like this:

v-if="flat.payment && flat.payment.installment_payment"

Upvotes: 1

Related Questions