How do you set context in wwLayoutItemContext?

Developer corner
1

I know the following is gonna be kinda wrong, but I’d need to use a div, instead of the <wwLayoutItemContext> to do a v-for, and then pass the context/data to the layoutItemContext

See the following code.

<template>
  <div :id="idcko">
    <div :key="item" v-for="(item, index) in items" :data="item"> <-- v-for is here
      <wwLayoutItemContext :key="item" is-repeat :item="item" :index="index"> <- I'd need context to be here
        <wwElement :key="item" v-bind="content.itemContainer" />
      </wwLayoutItemContext>
    </div>
    <wwElement :key="item" v-bind="content.itemContainer" />
  </div>
</template>

Is there a way to set context without v-for?

2

For anyone wondering, it is :data="..your data" I just found it out :smiley: Sorry for spamming.
Anyway, some may wondering, why I’m actually using v-for on a div. It is because, when I use the SortableJS library, it seems that it goes out of sync somehow, with the DOM. The items go out of the ww editor something, I’m not sure what this is @aurelie, but once it is out, it bugs and leaves stuff - DOM elements behind on :key refresh

Screenshot 2023-08-22 at 17.19.50

3

If you use wwLayout, it will do the v-for for you, injecting correctly the context
If you want to control your v-for, the data need to be inside data and not item
I also advice you to have the key on the v-for, and not on the wwLayoutContext. It also need to be bind to a string if possible

<wwLayoutItemContext is-repeat :item="null" :index="index" :data="item">

4

This is custom comment we use to have less code on the published app (code specific to the editor)
Some library which move from Vue2 to Vue3 often handle badly the logic when there is comment somewhere, this is maybe that?

5

Hmm, I’m not sure, I’m using the library that actually is Vanilla JS, but wrapping the comments in divs seems to have helped. Might be that comments bug the perception of how Draggable takes the elements in.