0

Делаю rest-приложение на vue. В бэкэнде есть несколько связанных таблиц, например, товары склады заказы клиенты. Для каждой таблицы есть страницы - index, create, edit, show. В индексе выводится список записей таблицы. В следующих двух - форма для создания и редактирования. В шоу - тоже те же поля записи только без возможности редактирования. Сейчас каждая страница в своем файле целиком работает. Но сейчас нужно добавить еще несколько таблиц в базу и каждой сделать такие же страницы. Хочу переделать по-человечески. Сделать так: есть так же страницы для каждого действия, но для create, edit, show сделать отдельный компонент содержащий в свою очередь компоненты полей. Поля для всех трех страниц одни и те же (например для товаров - категория тип модель название артикул цена и т. д.) только в create при создании ничего передавать не надо только передать в родительский компонент страницы данные из полей, в edit нужно передать в поля данные полученные с сервера и потом обратно в родительский компонент, в шоу-страницу только предать в поля и сделать инпуты в компонентах полей не редактируемыми. То есть компонент страницы действия->компонент, содержащий компоненты полей->компонент поля с лэйблом и инпутом (несколько таких компонентов:). Промежуточный компонент одинаковый для create edit show. Как правильно передавать данные из инпутов и действие submit в компонент страницы (там уже вызывается метод с axiosом). Переходы по страница осуществляются через vue-router. При монтировании страницы данные сейчас загружаются в дата компоненты страницы.

1 ответ 1

0

Недавно отвечал на подобный вопрос, посмотрите на этот ответ.

В дополнение к вышеприведённому ответу могу сказать, что нужные вам методы вы можете вызывать создавая событие в дочернем компоненте используя $emit и отлавливая это событие в родительском компоненте.

Вызов метода по событию:

<ChildComponent @update="yourMethod"></ChildComponent>

Создание события в ChildComponent:

this.$emit("update")

Если возникнут ещё вопросы или будет что-то не понятно - буду рад помочь.

2
  • А как через компонент в данном случае передать? Метод отправки на сервер содержится в компоненте страницы, потом промежуточный компонент содержащий в себе компоненты с полями ввода. Вот надо передать из компонентов полей в компонент страницы. Можно конечно цепочку событий-эмитов. Но может быть есть какой-либо изящнее способ есть? 9 ноя 2020 в 11:23
  • Я бы посоветовал такую структуру: в родительском компоненте вы создаёте места, где должны храниться изменяемые данные, а дочерние компоненты связываете с ними. У вас есть всего три варианта: props, v-model (v-bind, v-on) и Vuex. Какой из них больше подойдёт в вашем проекте я с уверенностью сказать не могу, но исходя из описанной в вопросе ситуации подойдёт v-model. Так же вы можете передавать данные через props объектом, в таком случае вы сможете изменять их напрямую.
    – peperoneen
    9 ноя 2020 в 12:54

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.