在列表之间动态切换以显示 Vuejs？

Question

我需要能够在列表之间切换以在 vuejs 中显示。就像这样：

  <app-card
        v-for="card in cardsCache[currentCategory]"
        :key="card"
        :affiliateLink="card.affiliateLink"
        :author="card.author"
        :category="card.category"
        :comments="card.comments"
        :description="card.description"
        :downvotes="card.downvotes"
        :id="card.id"
        :imageUrl="card.imageUrl"
        :timeCreated="card.timeCreated"
        :title="card.title"
        :upvotes="card.upvotes"
        @click-card="clickCard"
        @click-upvote="clickUpvote"
        @click-downvote="clickDownvote"
        @click-affiliateLink="clickAffiliateLink"
        @click-comments="clickComments"
        @click-save="clickSave"
      ></app-card>

注意我正在使用 vfor 做什么，我正在使用可能随时更改的 currentCategory 变量访问一个对象。这种工作，但有问题。当我最初切换类别时，它将按预期呈现，但如果我继续添加到最近切换到类别的数组中，它将不会继续呈现以呈现正在添加到列表中的内容。是的，我检查了列表实际上是添加了项目。我发现任何作为文字添加到 cardsCache 对象的列表，所以：cardsCache: {"popular": []} 那么该列表不会发生此问题。我还发现，如果我在同一个列表中来回切换，它会突然呈现添加到其中的所有新项目。就像 vuejs 无法观察对象一样。我认为我正在尝试做的是相当基本的，但我无法找到任何人这样做的例子。

下面是我如何添加要显示的数据：

      const self = this;
      if (Util.nullOrUndefined(self.cardsCache[category])) {
        self.cardsCache[category] = [];
      }
      if (self.previousCategory != self.currentCategory) {
        Util.scrollToTop();
      }

      if (this.loadingCards === false) {
        if (category == "search") {
          this.cardSearch();
        } else {
          this.loadingCards = true;
          ApiCalls.loadCardsFromCategory(
            this,
            category,
            resp => {
              let cards = resp.data.resp.api_data.cards;
              parseCards(cards).forEach(c => {
                self.cardsCache[category].push(c);
              });

              self.previousCategory = self.currentCategory;
              self.currentCategory = category;
              self.loadingCards = false;
            },
            (error, context) => {
              console.log(error);
              self.loadingCards = false;
            },
            this.userId
          );
        }
      }
    },```

You'll want to pay attention to the line where I say ```self.cardsCache[category].push(c)```

Answer 1

在我将更多数据加载到缓存中后，将self.$forceUpdate() 添加到部分中，这会迫使 vue 重新呈现解决问题的列表。

Answer 2

有几种方法可以解决您的问题。其中之一可能是使用computed properties：

{
  data() {
    return { 
      currentCategory: 'animals',
      cardsCache: {},
    };
  },
  computed: {
    currentCards: function () {
      return this.cardsCache[this.currentCategory];
    }
  },
  ...
}

问题也可能是由于在您的v-for 中不正确使用:key attribute 引起的 - 它应该是数字或字符串，而不是对象 - 类似于 card.id。