Kirby 3.9 k-items doesn't work anymore

Kirby 3
,
1

Hi everyone,

why does the k-items component no longer work after each update -.- All plugins that use this component also no longer work. I can neither find breaking changes nor any other information on how to get it running up…

What’s going on here? ^^ Please… help us with the correct way to use this component now…

<k-items v-if="Object.keys(sites).length > 0">
          <template v-for="data in sites">
          <k-item
              :class="['site', 'customer-id-' + data.xxx_customer_id, {'mb-2':Object.keys(data.users).length == 0}]"
              :image="{'back':'#fff','icon':'page'}"
              :key="data.site"
              :options="((data.folder !== 'xxx') ? 'sitemanager/' + data.site : '')">
            <span @click="loginAs(data.site)" v-if="data.folder === 'xxx'">xxx Verwaltung</span>
            <span @click="loginAs(data.site)" v-else>{{ data.site }} <small>({{ data.folder }})</small></span>
            <span>Größe: {{ data.memory }}</span>
          </k-item>
            <k-items v-if="Object.keys(data.users).length > 0" class="ms-3 mb-2 text-muted">
          </template>
        </k-items>
2

Hey,
That’s not globally true : it still works in 3.9 with my plugins, they just broke in 3.7 in my case.

  1. You are relying on an unfinished/unsupported/partially-documented Vue component :

    This UI component hasn’t been finalized yet. The functionality and syntax aren’t stable and might be redone in an upcoming release. Only use it at your own risk - breaking changes are likely to occur.

  2. Changes are still mostly documented:

When they break, I like to check the component’s file commit history to get an idea of what broke and checking the Vue code of how Kirby uses the component often provides solutions.

You have to use <k-items items="myItems">. If you need a custom template (default slot), you then have to grab the looped-data-item like : <template v-slot:default="data">. (read: Vue Scoped Slots)

<k-items layout="list" :items="myItems">
    <template v-slot:default="data">
        <!-- data.item is an entry of myItems here -->
        <k-item :text="data.item.name" :info="data.item.info"></k-item>
    </template>
</k-items>
1 Like
3

Wow! Thank you so much, really! This is the solution for all my problems. I would never found this “way of code” with only the documentation… Is there any other hidden secret documentation available? :rofl: :sweat_smile:

4

Haha, my pleasure, mine broke the same way.
It’s more or less obscure yes. Meanwhile, the docs state that being familiar with Vue development is useful when “adventuring” into building custom UI-Kit components. From that point, the Vue documentation became my best friend, but it took me quite some time to understand its logics and relate it to how Kirby implements Vue. It’s quite different from basic web programming logics.

1 Like