Vue.js：v-for / v-if 中的无限循环更新答案

【问题标题】：Vue.js : infinite loop update in v-for / v-ifVue.js：v-for / v-if 中的无限循环更新
【发布时间】：2021-04-26 15:06:23
【问题描述】：

我有一个包含产品列表的 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 显示此列表。用户可以过滤此列表，点击按钮（“价格”、“类别”、“商家”）。

当用户点击“类别”时，我对 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;
    }
  },

与：数据（）{ 返回{ 当前类型：9999999， } },

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

你有想法吗？非常感谢！

【问题讨论】：

标签： vue.js v-for

【解决方案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;
    }
  },

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

【讨论】：