Данные не передаются в компонент Vue - PullRequest
Новая
       3

Данные не передаются в компонент Vue

1 голос
/ 08 апреля 2020

У меня есть Vue компонент, получающий массив 'items' от своего родителя.

Я отсортировал их по категориям, по два 'items' в каждой категории: 

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 результаты работают нормально, но они бесполезны при выходе из страницы.

«Предметы» из запроса Ax ios 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;
            });
        }
    },

Передача реквизитов дочернему компоненту: 

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

1 Ответ

1 голос
/ 08 апреля 2020
  • Не беспокойтесь о добавлении элементов в категории, держите их отдельно
  • Вместо нескольких вычислений используйте один вычисленный объект ha sh для хранения всех отфильтрованных наборов: 
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>

Вот демоверсия

...