x-if is added multiple times

[kjvdven]

I have been playing around with alpineJS and spruce.

Now I have an issue with a piece of code being added multiple times, and I don't know why.

Code:

<div class="row toggle hover question" :class="{ 'active': item.show }" :x-ref="item.Id">
    <div class="heading grid grid-flow-col" @click="$store.app.isSidebarOpen = true, $store.app.activeItem = item, $store.app.activeSection = false">
        …
    </div>
</div>

<div id="detail-view" x-show="$store.app.isSidebarOpen">
    <template x-if="$store.app.activeItem.Id">
        <div x-data="item = $store.app.activeItem"></div>
    </template>
    <template x-if="$store.app.activeSection.Id">
         <div x-data="section = $store.app.activeSection"></div>
    </template>
</div>

Spruce:

Spruce.store('app', {
    isSidebarOpen: false,
    activeItem: false,
    activeSection: false,
    types: [
        {'id': 1, 'name': 'YesNo', 'icon': 'checkbox'},
        {'id': 2, 'name': 'Text', 'icon': 'forms'},
        {'id': 3, 'name': 'Select', 'icon': 'select'},
        {'id': 4, 'name': 'Date', 'icon': 'calendar'},
        {'id': 5, 'name': 'Images', 'icon': 'photo'},
        {'id': 6, 'name': 'Time', 'icon': 'clock'},
        {'id': 7, 'name': 'Radio', 'icon': 'square-dot'},
        {'id': 8, 'name': 'Location', 'icon': 'location'},
        {'id': 9, 'name': 'Info', 'icon': 'info-circle'},
        {'id': 10, 'name': 'LongText', 'icon': 'align-justified'},
        {'id': 11, 'name': 'LocationOnSheet', 'icon': 'pin'},
        {'id': 12, 'name': 'Number', 'icon': 'hash'},
        {'id': 13, 'name': 'Table', 'icon': 'table'},
        {'id': 14, 'name': 'Html', 'icon': 'brand-html5'},
        {'id': 15, 'name': 'YesNoV', 'icon': 'checkbox'},
        {'id': 16, 'name': 'SelectV', 'icon': 'select'},
        {'id': 17, 'name': 'RadioV', 'icon': 'square-dot'},
        {'id': 18, 'name': 'TableRowInfo', 'icon': 'table'},
        {'id': 19, 'name': 'MultiSelect', 'icon': 'checkbox'},
        {'id': 20, 'name': 'Year', 'icon': 'calendar'}
    ]
})

When I click on the sidebar trigger, the template div is added multiple times.

Preview of the mockup:
http://72media.nl/clients/mockup/builder/sidebar.html

[KevinBatdorf]

The URL you shared isn't working. Can you add a spacer <div> between the x-show and x-if parts? I'm not sure it will work but just to check.

[kjvdven]

thnx, corrected the url.

Also I added a spacer div, but no change.

[KevinBatdorf]

When I visit the URL I see a lot of errors in the console. Are you still working on it?

[kjvdven]

This was a classic; "worked on my machine".
Fixed the faulty link.

[KevinBatdorf]

It seems the code demo is still buggy. When I click on a button to open the sidebar it takes forever and then a bunch of errors still show. It never gets to the point where it inserts multiple items. Can you test the demo?

Just briefly looking at the code, it looks like you're using an object as a :key (section). That might be the issue. Use a primitive type like a string or a number instead. And don't use the index. Instead make an ID like you did with item