在 Svelte 中加载更多按钮

Question

我正在探索 Svelte，这很棒。 但是我有一个问题，更多的是一个问题。 我正在尝试实现一个简单的加载更多按钮，这是我的代码：

<script>
  import { onMount } from "svelte";

  let data = [];

  onMount(async () => {
    const res = await fetch(`./past-reza.json`);
    data = await res.json();
  });

      let currentItems = 2;
    loadmore.addEventListener('click', (e) => {
        const elementList = [...document.querySelectorAll('.list-element')];
        for (let i = currentItems; i < currentItems + 2; i++) {
            if (elementList[i]) {
                elementList[i].style.display = 'block';
            }
        }
        currentItems += 2;

       
        if (currentItems >= elementList.length) {
            event.target.style.display = 'none';
        }
    })
</script>

我的 HTML 部分看起来像这样：

{#each data as item}
  <div class="list-element">
    <h2>{item.title}</h2>
  </div>
{/each}

并加载更多按钮

 <button
    id="loadmore"
    type="button"
    class="btn btn-secondary">
    Show more
  </button>

问题是我的内容没有显示在我为load more添加的这部分 JS 代码中。

有人可以帮我解决这个问题吗？

Answer 1

你可以在这里使用更svelte的，比如：

<script>
    import { onMount } from "svelte";
    let data = []
    
    onMount(async () => {
    const res = await Promise.resolve({ json: () => [1,2,3,4,5,6,7,8,9,10] });
    data = await res.json();
  });
    
     let currentItems = 2;
</script>

{#each data.slice(0, currentItems) as item}
  <div class="list-element">
    <h2>{item}</h2>
  </div>
{/each}

{#if currentItems < data.length}
 <button
    on:click={() => currentItems = currentItems + 2}
    id="loadmore"
    type="button"
    class="btn btn-secondary">
    Show more
  </button>
{/if}

https://svelte.dev/repl/5823b6e8a30447c59ce5b770f8a84593?version=3.31.2