数据未传递给 Vue 组件

Question

我有一个 Vue 组件从其父组件接收“项目”数组。

我已将它们分类，每个类别中有两个“项目”：

computed: {
        // sort items into categories
        glass: function() {
            return this.items.filter(i => i.category === "glass").slice(0, 2);
        },
        ceramics:
        // etc...

我需要将这两个项目都放在categories.items 中，然后将它们作为道具传递给另一个组件：

data() {
        return {
            categories: [
                { name: "Glass", sort: "glass", items: {} },
                { name: "Ceramics", sort: "ceramics", items: {} },
                { name: "Brass", sort: "brass", items: {} },
                { name: "Books/Comics", sort: "books", items: {} },
                { name: "Collectibles", sort: "collectibles", items: {} },
                { name: "Pictures", sort: "pictures", items: {} },
                { name: "Other", sort: "other", items: {} }
            ]
        };
    },

当我使用 created 或 mounted 时，没有任何内容通过，当我使用 beforeDestroy 或 destroy 和 console.log 时，结果可以正常工作，但是退出页面时它们没有用.

“项目”来自 Axios GET 请求，这可能是为什么？

父组件的GET请求：

methods: {
        fetchItems() {
            // items request
            let uri = "http://localhost:8000/api/items";
            this.axios.get(uri).then(response => {
                // randomize response
                for (let i = response.data.length - 1; i > 0; i--) {
                    const j = Math.floor(Math.random() * (i + 1));
                    [response.data[i], response.data[j]] = [
                        response.data[j],
                        response.data[i]
                    ];
                }

                this.items = response.data;
            });
        }
    },

将 props 传递给子组件：

        <div
            class="items-container"
            v-for="category in categories"
            :key="category.name"
        >
            <router-link :to="'category.link'" class="category-names-home-link">
                <h2 class="category-names-home">{{ category.name }}</h2>
            </router-link>
            <router-link
                :to="'category.link'"
                class="home-view-all"
                @mouseover.native="expand"
                @mouseout.native="revert"
                >View All...</router-link
            >
            <div class="items">
                <!-- Pass to child component as props: -->
                <SubItem :item="categories.items" />
                <SubItem :item="categories.items" />
            </div>
        </div>

Answer 1

• 不要费心将项目添加到类别中，将它们分开
• 使用一个计算对象哈希来存储所有过滤后的集合，而不是多个计算对象：

computed: {
  filtered() {
    if (!this.items) return null;
    const filtered = {};
    this.items.forEach(item => {
      if (filtered[item.category]) {
        filtered[item.category].push(item);
      } else {
        filtered[item.category] = [item];
      }
    });
    return filtered;
  }
}

结果：

{
'Glass': [ ... ],
'Ceramic': [ ... ]
...
}

在模板中：

<div>
   <div v-for="category in categories" :key="category.name">
      <div class="items" v-for="item in filtered[category.name]">
         <SubItem :item="item" />
      </div>
   </div>
</div>

您可以在父级中使用v-if 来防止在加载数据之前显示任何内容：

<display v-if="items" :items="items"></display>

这是demo