Svelte JavaScript - 来自其他文件的 JS 对象问题

Question

这是我第一次 post 来这里。我希望做对:)

我对 Svelte/Javascript 有疑问。

我有一个 svelte 文件，在同一目录中有一个 js 文件。

在这个js文件中我定义了一个对象：

export var imagesSlider1 = {
    items: [
        './bild1.jpg',
        './bild2.jpg',
        './bild3.jpg',
        './bild4.jpg',
        './bild5.jpg'
    ],
    activeIndex: 0,
}

在 svelte 文件中，我将 js 文件包含在对象中。在 svelte 文件的 html 代码中，我像这样访问对象：imagesSlider1.items 这里是完整代码：

<Carousel {imagesSlider1.items} bind:imagesSlider1.activeIndex>
                <div class="carousel-inner">
                    {#each imagesSlider1.items as item, index}
                        <CarouselItem bind:imagesSlider1.activeIndex itemIndex={index}>
                            <img src={item} class="d-block w-100" alt={`${item} ${index + 1}`} />
                        </CarouselItem>
                    {/each}
                </div>

                <CarouselControl direction="prev" bind:imagesSlider1.activeIndex {imagesSlider1.items} />
                <CarouselControl direction="next" bind:imagesSlider1.activeIndex {imagesSlider1.items} />
            </Carousel>

当我启动应用程序时出现此错误：

...PATH.../index.svelte:264:36 Expected }
 262 |          </div>
 263 |          <div class="card-body">
 264 |              <Carousel {imagesSlider1.items} bind:imagesSlider1.activeIndex>
                                            ^
 265 |                  <div class="carousel-inner">
 266 |                      {#each imagesSlider1.items as item, index}

老实说，我不明白这个问题。我非常确定这是一个容易犯的错误。希望有人能帮忙。

提前致谢！

Answer 1

{items} 是 shorthand 对于 items={items}
bind:activeIndex bind:activeIndex={activeIndex}

由于您没有变量 items 和 activeIndex 保存值，因此您必须像这样传递它们

<Carousel items={imagesSlider1.items} bind:activeIndex={imagesSlider1.activeIndex}>

Svelte JavaScript - 来自其他文件的 JS 对象问题

Svelte JavaScript - Problem with JS-Object from other file

svelte