Блог

Это раскрывающийся компонент, используемый для предоставления списка всех сеток на всех страницах. На этих страницах есть несколько страниц и сеток.

     <v-dropdown
        :items="pageGrids"
        :item-text="gridNamesAndPages"
        return-object
    />
 

Имена и страницы сетки находятся в разделе методы:

     gridNamesAndPages: item => item.name   ' • (Page: '   item.page_name.name   ')',
 

Это метод, используемый для назначения пустых сводных сеток массива всем сеткам для этого проекта:

     getAllPageGrids() {
        apiClientGet(
            routes["pages.getAllPageGrids"],
            null,
            response => {
                this.pageGrids.push(response.data);
            }
        );
    },
 

Функция в контроллере:

     public function getAllPageGrids()
    {
        return Auth::user()->client->grids()->get();
    }
 

Сводные таблицы представлены в этом формате. Там может быть несколько сеток, поэтому, хотя это показывает только 3, их может быть 100:

     [
        {
            "id": 3,
            "name": "AS",
            "grid_cols": [
                {
                    "id": 16,
                    "grid_id": 3,
                    "order": 1,
                    "header": "Col 1",
                }
            ],
            "page_name": {
                "name": "Page 1"
            }
        },
        {
            "id": 4,
            "name": "SF",
            "grid_cols": [
                {
                    "id": 21,
                    "grid_id": 4,
                    "header": "Name",
                },
                {
                    "id": 22,
                    "grid_id": 4,
                    "header": "Reference",
                }
            ],
            "page_name": {
                "name": "Page 1"
            }
        },
        {
            "id": 5,
            "name": "WE",
            "grid_cols": [
                {
                    "id": 24,
                    "grid_id": 5,
                    "header": "Name",
                }
            ],
            "page_name": {
                "name": "Page 2"
            }
        }
    ]
 

Однако я продолжаю получать эту ошибку:

Я не вижу ничего плохого в том, как структурирован код. Кто-нибудь знает, действительно ли я написал это неправильно?

(По запросу я также включил пользовательский компонент v-выпадающего списка)

 <template>
    <v-select
        :class="`text-field-${color || 'white'}`"
        outlined dense
        v-on="$listeners" v-bind="$attrs"
    >
        <slot>
            <!--  -->
        </slot>
    </v-select>
</template>

<script>

export default {
    props: {
        color: {
            type: String|null,
            default: null
        }
    },
};
</script>