K-items not working since Kirby 3.7

Kirby 3 Solved ✅
1

Hi. I’m using this code in my plugin:

       <k-items>
            <k-item
                v-if="list.length == 0"
                class="k-field-type-page-list-item-empty"
                :text="$t('form.block.inbox.empty')"
            />
       </k-items>

Since the update to 3.7 the output will not shown anymore. No error in console. No mention in the release note.
May you can help me?

2

That’s from your form blocks plugin, right? So multiple items show correctly, just this empty one doesn’t? Does this render anything in the source code and just the text is empty, or don’t you get anything?

3

Hi Sonja

That’s right, it’s from kirby-form-blocks. I modified the code a bit to focus on the relevant things. The original code is here.

The last item shows actually the empty text. Even if i escape that, the complete k-items will not shown.

4

Hi there. I just removed the k-items wrapper tag (<k-items></k-items>) and now it works.

5

Hi. I am facing this same issue in two (non-public) plugins of mine. I’ve been assessing the core source code and change logs to no avail…

In my plugin #1, I got it solved by reworking how items are loaded into the component. Here is what I had working pre-3.7:

<k-items if="subscribers.length" :layout="layout" :size="size">
  <k-item
    v-for="(subscriber, index) in subscribers"
    :layout="layout"
    :key="index"
    :info="subscriber.status"
    :text="subscriber.email"
    :options="'myplugin/subscriber/' + subscriber.id"
 />
 </k-items>

In 3.7, the <k-items> got rendered into a <div class="k-draggable k-items k-list-items" data-layout="list" data-size="default"></div> as could be expected, but it remained empty – the k-item elements never showed up.

After a bit of experimentation, I got this solved by feeding the items directly into the k-items component (required a bit of adaptation in the backend, but no big deal):

<k-items v-if="subscribers.length" :layout="layout" :size="size" :items="subscribers" />

Now I’m facing the same issue in another plugin, but this time I cannot apply the same strategy as I am not using the core component’s default items (i.e. cannot feed the data array directly into the k-items component) but I have a custom component for each item:

<k-items v-if="bookmarks.length" :layout="list">
  <bookmarkitem
    v-for="(bookmark, index) in bookmarks"
    :image="bookmark.image"
    :layout="layout"
    :key="index"
    :link="bookmark.link"
    :bookmark="bookmark"
    :text="bookmark.title"
  />
</k-items>

Again, while this worked flawlessly in 3.6, I now get the k-items component rendering an empty div and none of the items are rendered using my custom bookmarkitem component.

The solution outlined by @Microman (removing the k-items component; in my case replacing the tag with a div) does indeed restore the display of my custom component list, but I am losing some of its formatting. I have a hunch that there must be a very simple solution to this, but I cannot figure out what change in the k-items component may be causing this?

6

Ping @distantnative.

1 Like
7

I am afraid in this Use `k-collection` instead of `k-items` · getkirby/kirby@a795231 · GitHub we by mistake removed the default slot. We should bring it back: `Items.vue`: default slot missing in Kirby 3.7 · Issue #4635 · getkirby/kirby · GitHub

1 Like
8

Thx @distantnative for confirming; so it was a bug after all…

In the meantime, I figured I could replace my <k-items> element with <div v-if="bookmarks.length" class="k-draggable k-items k-list-items" data-layout="list" data-size="default"> and get the original rendering. Easy peasy. Will roll back once the fix arrives in core :slight_smile:

9

Will be fixed in 3.8.0