Dynamic attrs (props)

[xaja]

from v-if loop i want to open popup with item prop, something like that:

in template:

<tr
  v-for="item in items"
  :key="item.id"
  class="cursor-pointer"
  @click="openWarningsPopupItem(item)" // ???
>

in script:

const { open: openWarningsPopupItem } = useModal({
  component: WarningsPopupItem,
  attrs: {
     item: // ???
  },
});

is there solution to do that in this version of VFM?

[hunterliu1003]

@xaja Yes, please follow the documentation here: https://vue-final-modal.org/api/composables/use-modal#passing-props-and-events

[JshGrn]

@hunterliu1003 I do not believe this is answered, how can I access 'item' which is passed into the open function?

[Firstasianinspace]

May be we are noobs, but i also don't see how can i pass dynamic props. I got a payload from v-for item, then modal opens with undefined props

[JshGrn]

I solved this by making sure that the item passed in the attrs was a computed prop, e.g.

attrs: {
    item: computed(() => state.valuehere)
}

Then in the modal in script setup used

 defineProps({
      item: {
          required: true
      }
 });

Without it being computed it wasn't reactive, I do not think the examples and the docs are very clear on this at all. You can then post back to the onConfirm method using defineEmits for communication from the modal.