Создание панировочных сухарей для настольной навигации VUEJS - PullRequest
Новая
       8

Создание панировочных сухарей для настольной навигации VUEJS

0 голосов
/ 26 октября 2018

Я младший разработчик, и у меня сейчас большая проблема с сухарями.

Для этого приложения я использую VueJS, и у меня возникает следующая проблема:

* Пользователь нажимает на «таблицы» и отправляется на страницу «таблицы».

-На этой странице 'таблиц' у него есть большая таблица, в которой он может щелкать по различным столбцам, чтобы показать новую таблицу с данными, относящимися к столбцу, по которому он щелкнул.

* Для этого я использую тот же компонент , поэтому я не использую маршрутизаторы, а использую v-show, так как не хочу, чтобы таблицы перерисовывались.

Моя проблема заключается в следующем, я должен сделать панировочные сухари, когда он перемещается к различным таблицам (то есть: table / holdingList / entrepriseList / clientList ..). и они должны быть активными, чтобы я мог создать функцию, которая вводит данные в таблицу или просто «показывать» ее и закрывать остальные.

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

1 Ответ

0 голосов
/ 27 октября 2018

Я начну с самого простого решения:

  • Каждое v-шоу будет зависеть от другого объекта данных. Тогда у вашей хлебной крошки есть метод @click, который установит для каждого объекта данных v-show значение false. Дайте методу параметр с именем объекта данных, который вы намереваетесь показать, и отобразите его как true.

Предыдущий ответ достаточно, чтобы заставить его работать. Другие способы достижения того же результата более приемлемым способом:

  • Создайте один объект данных с именем activeTable и превратите ваш v-show в v-if. Когда вы щелкаете по элементу breadcrumb, вы меняете объект данных activeTable на идентификатор таблицы, которую вы хотите отобразить. После этого ваш vue-if просто проверяет, если activeTable === thisTableId. Где thisTableId - идентификатор каждой таблицы.

  • Возможно, вы захотите начать знакомство с Vuex, особенно если ваши столы имеют похожую планировку. Таким образом, вы будете хранить данные, и нет необходимости запрашивать ваши данные снова. Это полезно, если данные для заполнения ваших таблиц поступают из API.

  • Наконец, в архитектуре SPA реальный рендеринг отсутствует, поэтому вы, возможно, захотите посмотреть и на это.

Пожалуйста, прочитайте инструкции по публикации ответа, поскольку они требуют от вас хотя бы каких-то усилий. Удачи!

...