网格模板区域未渲染Vue JS

非常困惑,因为我复制了先前项目的样式粘贴,没有问题。使用VueJS和初始应用程序将无法正确显示网格区域模板。搜索所有类似的问题,而不是结果。任何帮助表示赞赏!

<template>
  <div id="app">
    <search-bar></search-bar>
    <history-cont></history-cont>
    <video-view></video-view>
    <bookmarks-cont></bookmarks-cont>
  </div>
</template>

<script>
import Bookmarks from './components/Bookmarks'
import History from './components/History'
import SearchBar from './components/SearchBar'
import VideoView from './components/VideoView'

export default {
  name: 'App',
  components: {
    'bookmarks-cont': Bookmarks,
    'history-cont': History,
    'search-bar': SearchBar,
    'video-view': VideoView
  }
}
</script>

<style>
#app {
  display: grid;
  grid-template-rows: 55px 1fr;
  grid-template-columns: 240px 1fr 240px;
  grid-template-areas: "history-cont search-bar bookmarks-cont"
                       "history-cont video-view bookmarks-cont";
}
</style>

I've also tried replacing the grid-template-areas names with the names of the imported components, but it doesn't work:

grid-template-areas: 
"History SearchBar Bookmarks"
"History VideoView Bookmarks"

这在我以前的应用程序中有效,但是按照下面的注释,我做到了:

#app {
  display: grid;
  grid-template-rows: 55px 1fr;
  grid-template-columns: 240px 1fr 240px;
  grid-template-areas: "history-cont search-bar bookmarks-cont"
                       "history-cont video-view bookmarks-cont";
}

#app > #search-bar{
  grid-area: search-bar;
}

#app > #history-cont{
  grid-area: history-cont;
}
#app > #video-view{
  grid-area: video-view;
}
#app > #bookmarks-cont{
  grid-area: bookmarks-cont;
}

仍然不起作用。以下都不是:

#app > bookmarks-cont{
  grid-area: bookmarks-cont;
}

评论
[呛人心]
[呛人心]

You're using ids as selectors for your grid areas but you're not assigning those ids to each individual component.

Once you place each id correctly on each element, it starts working:

<template>
  <div id="app">
    <search-bar id="search-bar"/>
    <history-cont id="history-cont" />
    <video-view id="video-view" />
    <bookmarks-cont id="bookmarks-cont" />
  </div>
</template>

See it here: https://codesandbox.io/s/fancy-cookies-p68ei?file=/src/App.vue

或者,您可以将选择器更改为实际上与要设置样式的元素匹配的任何CSS选择器表达式。 这就是CSS的工作方式:)。

点赞
评论