Question

这个问题已经让我退缩了几天，但更糟糕的是让我感到愚蠢。 “也许，所以，我们正在失去它。”

任务1：创建一个从REST API REST API获取的应用程序。使其在网格中显示数据...

容易。使用vue-cli 3的脚手架。给App.vue提供一个函数，获取数据对象并将数组发送到Grid.vue下方，然后将其分配到Tile.vue个对象中。

  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进行监听，检查ID，并在匹配的情况下，将适当的道具发送给平铺，使其以模式显示v-if细节。

这是墙：

任务3：“详细信息”页面具有单独的地址，以使其易于访问和共享，这意味着可以通过whatever.com/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组件（转到“ ./”）基本上什么也没做-并且只要ID匹配，就会出现Detials.vue。

将v-for的切片组件包装在<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>

将后退按钮设置为后退按钮以将其关闭：

<router-link to="/"> <button class="return">BACK</button></router-link>
在动态创建的路线like the one here

免责声明

几乎可以使用！点击磁贴会弹出Details.vue，并带有正确的道具，URL更改也可以恢复。

问题

我对应该发生的事情了解得很不对劲。当我点击一个图块时，确实会显示Details.vue并带有适当的道具，但是一旦我实际编辑浏览器的地址栏并输入一个编号为/:id的项目，例如localhost:8080/3 （或者使用该网址刷新浏览器），它向我显示了Details.vue组件，没有内容，为空。

问题：

-当请求whateverappname.com/2时，应如何将适当的获取的对象传递给组件？我应该从Details.vue内部重新获取吗？如果包含所有对象（以及路由）的数组已经在App.vue中，这听起来像是浪费。我应该以某种方式将道具传递给<route-link>吗？还是应该以某种技巧将获取的对象数组映射到路由？还是增强原始获取的Array的方法？拜托，像我3岁时跟我说话。

如果需要，我很乐意提供更多代码，并尝试使其简短（无论如何还是失败了）。

将提取的数据传递到动态创建的路由

0 个答案: