[Vue] OptionsDrown emit "action" = emtpy item and itemIdex

The CMS Questions
1

Hi,

i am currently implementing a field utilizing k-items and k-item. I also added an option array like:

   <k-items v-if="items.length">
      <k-item
        v-for="item in items"
        :key="item.article_url"
        :text="text(item)"
        :image="image(item)"
        :info="info(item)"
        layout="list"
        size="medium"
        :link="item.article_url"
        target="_blank"
        @action="action"
        :options=[
          { icon: 'open', text: 'Im Browser ansehen', click: 'open' },
          { icon: 'add', text: 'Beitrag hinzufügen', click: 'add' },
        ]
      >
      </k-items>

Ech items represents a remote article with an remote URL. The URL is set as key
which generally works well, but :slight_smile:

What i want to achieve is to call a route containing the key of the clicked item to do some backend stuff. I didn’t manage to get hold of the key attributes in any of the sent events. Grabbing through the code i found OptionsDropdown:L89 which seems to do the right thing but the sent event doesn’t seem to transfer “item” and “itemIndex”. My code

action(...args) {
      console.log("action: " + args)
}

sends option: add,, to the console.

Looking deeper with VUE-Dev-Tools (on Chrome) i didn’t find a prop or method which could carry the item variable

image
image1052×432 62 KB

tl;dr: my goal is to us the options to initiate a row/item specific action, so i need the respective row where the option has been clicked.

Appreciate your thoughts and hints,

Thanks, Thomas

2

I wonder if you have to bind the item to the component?

  <k-items v-if="items.length">
      <k-item
        v-for="item in items"
        v-bind="item"
        :key="item.article_url"
        :text="text(item)"
        :image="image(item)"
        :info="info(item)"
        layout="list"
        size="medium"
        :link="item.article_url"
        target="_blank"
        @action="action"
        :options=[
          { icon: 'open', text: 'Im Browser ansehen', click: 'open' },
          { icon: 'add', text: 'Beitrag hinzufügen', click: 'add' },
        ]
      >
      </k-items>
3

tried it, which made the item props available under $attrs, but it didn’t change anything regarding the event … unfortunately