Передача извлеченных данных динамически создаваемым маршрутам - PullRequest
Новая
       48

Передача извлеченных данных динамически создаваемым маршрутам

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

Эта проблема сдерживает меня уже несколько дней, но, что еще хуже, я чувствую себя глупо. "Mayday, ТАК, мы его теряем".

ЗАДАЧА 1: Создать приложение, получающее данные из REST API REST API . Отображать данные в виде сетки ...

Easy. Эшафот с использованием vue-cli 3. Дайте App.vue функцию, выбирающую объект данных и отправляющую массив вниз по Grid.vue, который распределяет его среди Tile.vue s. 

  this.isLoading = true;
    let self = this;
    fetch(self.url)
      .then(function(response) {
        return response.json();
      })
      .then(function(myJson) {
        self.fetchedBeers.push.apply(self.fetchedBeers, myJson);
        self.isLoading = false;
      });
  }
    ...
    GRID has:
              <beer-tile
                :beer="beer"
                :key="beer.id"
                v-for="beer in beers"
                :displayDetails="beer.id===beerOpen"
                @clicked="handleTileClick"
                @closed="handleTileClose"
              >
            </beer-tile>

ЗАДАЧА 2: При щелчке должно появиться всплывающее окно, отображающее некоторые дополнительные сведения об элементе, по которому щелкнули

Конечно, давайте подадим данные Tile.vue this.$emit событие при клике, Grid.vue прослушивают его, проверяют идентификатор и, в случае совпадения, отправляют соответствующую подпорку на плитку, заставляя ее показать, что это v-if детали в модале.

Вот идет стена:

ЗАДАЧА 3: У страницы «Детали» есть отдельный адрес, чтобы сделать его доступным и совместно используемым, что означает, что к первому элементу извлекаемого массива можно получить доступ через whatever.com/1

Хорошо, это моя остановка. Я уже:

  1. Отделено Details.vue от Tile.vue, поэтому оно может служить компонентом для router.js: 

    export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/:id',
      component: Details
    }
  ]
})

ПРИМЕЧАНИЕ - возможно ранняя ошибка, пожалуйста, исправьте меня: так как я хочу, чтобы Grid.vue был виден на заднем плане модала, я решил поместить <router-view> под ним в App.vue, и иметь компонент home ( переходя к "./") в основном ничего - и получим Detials.vue, когда идентификатор совпадает.

  1. Обернутый v-for 'ed компонент плитки в <router-link>: 

    ...
now GRID has:

<router-link
  :to="`${beer.id}`"
  :key="beer.id"
  v-for="beer in beers"
  class="tile-wrapper"
>
  <beer-tile :beer="beer">
</beer-tile>

  2. Чтобы закрыть ее, нажмите кнопку "Назад", чтобы закрыть ее:

    <router-link to="/"> <button class="return">BACK</button></router-link>

  3. Последовал дружеский совет по динамически создаваемым маршрутам как здесь

ОТКАЗ

Это почти работает! Нажатие на плитку вызывает Details.vue с правильными реквизитами, URL-адреса также могут быть возвращены.

ПРОБЛЕМА

Я чувствую, что с моим пониманием того, что должно происходить, что-то не так. Когда я нажимаю на плитку, она действительно вызывает Details.vue с соответствующими реквизитами, но как только я на самом деле редактирую адресную строку браузера и вводю номер элемента как /:id, скажем, localhost:8080/3 (или обновляю браузер с помощью этот URL, в этом отношении), он показывает мне компонент Details.vue без реквизита, пустой.

ВОПРОС:

-При поступлении запроса на whateverappname.com/2 как передать соответствующий извлеченный объект компоненту? Должен ли я получить снова из Details.vue? Звучит как пустая трата, если массив, содержащий все объекты (и, следовательно, маршруты), уже находится в App.vue. Должен ли я как-то передать реквизиты <route-link> с? Или, может быть, я должен сопоставить извлеченный массив объектов с маршрутами с помощью некоторых хитростей? Или, возможно, расширение оригинального извлеченного массива является способом? Пожалуйста, говорите со мной, как будто я 3.

Я был бы рад предоставить еще немного кода, если необходимо, постарался сделать его кратким (и все равно потерпел неудачу).

...