Vue.js : v-for / v-if 无限循环更新

Question

我有一个 json 的产品列表。每个产品都属于一个类别（“玩具”、“衣服”、“装饰品”等）。

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

我正在使用 v-for 显示此列表。用户可以过滤此列表，单击按钮 ('Price'、'Category'、'Merchant')。

当用户单击“类别”时，我对 json:

进行排序

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

现在，我需要显示类别标签（“玩具”、“装饰品”等）。我做了这个：

   <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>

我想要这个显示：

玩具

礼物 1
礼物 3
礼物 5

衣服

礼物 4

装修

礼物 2

为了仅在类型标签发生变化时显示它，我使用我的函数：

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

与 : 数据（）{ return{ 当前类型：9999999， } },

但是，我有一个无限循环更新错误，因为我更改了 currentType 值，所以模型重新加载... 但是，我不知道如何做不同的事情来允许这种显示。

你有想法吗？非常感谢！

Answer 1

我找到了解决方案...

export let currentType = 99999;

和

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

很简单... 我希望有一天它会对某人有所帮助:)

Vue.js : v-for / v-if 无限循环更新

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

vue.js

v-for