Vue.js : infinite loop update in v-for / v-if

Question

I have a json with a listing of products. Each products belongs to a category ("Toy", "Clothes", "Decoration", etc...).

     gifts: [
      {
        id: 1,
        title: 'Les Aventuriers du Rail',
        price: 59.99,
        type_id: 1,
        type_label: 'Jouet',
        merchant_id: 1,
        merchant_name: 'Philibert'
      },
      {
        id: 2,
        title: 'Lampe de chevet',
        price: 138.49,
        type_id: 3,
        type_label: 'Décoration',
        merchant_id: 2,
        merchant_name: 'Amazon'
      },
      {
        id: 3,
        title: 'Dinosaur en plastique',
        price: 18.29,
        type_id: 1,
        type_label: 'Jouet',
        merchant_id: 3,
        merchant_name: 'Jouet Club'
      },
      {
        id: 4,
        title: 'Veste en daim',
        price: 57.59,
        type_id: 2,
        type_label: 'Vêtement',
        merchant_id: 2,
        merchant_name: 'Amazon'
      },
      {
        id: 5,
        title: 'Jeu de fléchettes',
        price: 5.90,
        type_id: 1,
        type_label: 'Jouet',
        merchant_id: 2,
        merchant_name: 'Amazon'
      },
    ],

I'm displaying this listing with a v-for. Users can filter this list, clicking on button ('Price', 'Category', 'Merchant').

When user click on "Category", I sort the json:

    this.gifts.sort(function(a, b){
      return a.type_id - b.type_id;
    });

Now, i need to display the Label of the category ("Toy", "Decoration", etc...). I made this :

   <div v-for="gift in gifts" :key="gift.id">
      <h3 class="list-gifts-cat mt-5" v-if="testTypeOrder(gift.type_id, gift.title)">
        {{ gift.type_label }}
      </h3>
      <cardGift :gift="gift" />
    </div>

I want this displaying :

TOY

• gift 1
• gift 3
• gift 5

CLOTHES

• gift 4

DECORATION

• gift 2

In order to display the Type Label only if it change, i use my function:

  testTypeOrder(type, title){
    if(type == this.currentType){
        return false;
    }else{
      this.currentType = type;
      return true;
    }
  },

With : data(){ return{ currentType: 9999999, } },

BUT, i have a Infinite Loop Update error, because i change the currentType value, so the model reload... But, i don't know how to do differently to allow this display.

Have you an idea ? Thanks A LOT !

Answer 1

I find solution...

export let currentType = 99999;

And

testTypeOrder(type, title){
    if(type == currentType){
        //console.log(title + ' => ' + type + ' == ' + this.currentType + ' return false');
        return false;
    }else{
      //console.log(title + ' => ' + type + ' != ' + this.currentType + ' return true');
      currentType = type;

      return true;
    }
  },

It was simple... I hope it will helps someone, one day :)