V-for классы, отображаемые друг над другом
У меня есть массив объектов, которые я хочу перебрать. Каждый объект отображается в собственном div. В этом конкретном списке всего три объекта, поэтому я мог бы просто разместить их вручную с помощью grid-row в css-grid, но для другой страницы мне, возможно, понадобятся сотни.
В настоящее время три класса визуализируются друг над другом, а не друг над другом.
<div class = "sidebar-last-three" v-for = "patient in this.lastThree">
<div class = "patient-entry">
<span class = "patient-name">{{patient.value}}</span>
<span class = "patient-date">{{patient.key}}</span>
<span class = "dots">...</span>
<span class = "line"></span>
</div>
</div>
Это CSS, который я использую.
.sidebar-last-three{
display: grid;
grid-row: 7/30;
grid-column: 1/11;
grid-template-rows: repeat(30, 1fr);
grid-template-columns: repeat(5, 1fr);
}
.patient-entry{
display: grid;
grid-column: 1/6;
grid-row: auto;
grid-template-columns: repeat(15, 1fr);
grid-template-rows: repeat(15, 1fr);
}
Я предполагаю, что это как-то связано с использованием v-for для создания классов, поскольку обычно с css-grid дочерние div автоматически переходят в строки и столбцы. Заранее спасибо!
@AdamOrlov Я пробовал сделать такой, но, похоже, не работает ..jsfiddle.net/eywraw8t/494600
Ответы 2
надеюсь, это может вам помочь.
<style>
.sidebar-last-three{
display: grid;
}
.patient-entry{
display: grid;
grid-column: auto;
grid-row: auto;
}
</style>
<div class = "sidebar-last-three" v-for = "patient in this.lastThree">
<div class = "patient-entry">
<span class = "patient-name">one on top of the one</span>
<span class = "patient-date">MM/DD/YY</span>
<span class = "dots">...</span>
<span class = "line"></span>
</div>
<div class = "patient-entry">
<span class = "patient-name">one on top of the two</span>
<span class = "patient-date">MM/DD/YY</span>
<span class = "dots">...</span>
<span class = "line"></span>
</div>
<div class = "patient-entry">
<span class = "patient-name">one on top of the three</span>
<span class = "patient-date">MM/DD/YY</span>
<span class = "dots">...</span>
<span class = "line"></span>
</div>
</div>
Спасибо @vssadineni, но я ищу что-то, что создаст три класса с помощью v-for, с тех пор я могу получить элементы из этого объекта с помощью Patient.key и так далее. У этого их всего три, но для другой страницы мне нужно сделать сетку из десятков.
Для укладки понадобится:
.sidebar {
display: grid;
position: fixed;
grid-template-columns: repeat(10, 1 fr);
grid-template-rows: repeat(10, 1 fr);
grid-column: 1;
width: 16.8vw;
height: 100%;
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.3);
background: #26292c;
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
left: 0;
}
.patient-name{
font-size: 16px;
color: #ffffff;
grid-column: 3/15;
grid-row: 1/2;
}
.patient-date{
font-size: 14px;
color: #98acc1;
grid-column: 3/15;
grid-row: 2/3;
}
.line{
background-color: #424a51;
width: 100%;
height: 1px;
grid-column: 1/16;
grid-row: 5;
}
.dots{
justify-self: center;
font-size: 16px;
align-self: center;
grid-column: 14/15;
grid-row: 1/2;
color: #ffffff;
}
.sidebar-last-three{
display: grid;
}
.patient-entry{
display: grid;
grid-column: auto;
grid-row: auto;
}
Я переместил ваш пример в код.
Попробуйте, если это сработает для вас. Вот рабочий пример:
Это именно то, что я искал, теперь я наконец могу двигаться дальше!
Похоже, у тебя неправильный стиль. Можете ли вы предоставить рабочий код, например jsfiddle?