Блог

Я работаю над личным проектом и хочу сделать подвижную сетку из своего <Desk> компонента. Все компоненты работают так, как я хочу, но при использовании библиотеки «svelte-grid», которую я установил, я не могу заставить программу сформировать сетку <Desk> компонента.

Я пытаюсь создать сетку, которая отображает <Desk> для каждого student из указанных period .

Ссылка на то, где я взял библиотеку -> >https://svelte-grid.vercel.app/usage

класс

 <script>
    export let roster 
    import Desk from "./Desk.svelte"
    import AddStudent from './AddStudent.svelte'
    import Grid from "svelte-grid";
    import gridHelp from "svelte-grid/build/helper/index.mjs";

    $: roster = roster
    let prd = 1
    $: period = period
    $: period = roster.filter(function(stud) {
        return stud.period === prd
    }
    )
    // implement gridHelp on each student in specified period
    for (student in period) {
        gridHelp.student({x: 0, y: 0, h: 0, id: student.id})
    }
    
</script>

<main>
    
    <div>
        <button on:click = {() => prd = 1}>Period 1</button>
        <button on:click = {() => prd = 2}>Period 2</button>
        <button on:click = {() => prd = 3}>Period 3</button>
        <button on:click = {() => prd = 4}>Period 4</button>
        <button on:click = {() => prd = 5}>Period 5</button>
    </div>
    
    <AddStudent /> 

    <!-- This is where I am trying to create the grid containing a desk for each student -->

    <Grid cols={3} bind:items={period} let:item={student}>
        <Desk>{student.id}</Desk>
    </Grid>
 

Любая помощь будет очень признательна!

Отображаются ли вообще предметы на столе? Что делать, если вы укажете высоту на своем компоненте сетки (см. Некоторые другие примеры стройной сетки https://svelte.dev/repl/2cf339cc1dc14223a1457e386195e52d?version=3.42.4)