Custom Index Field with Button and Modal

[danielschweiger]

I'm working on a custom field (index) which generate a button. A click on the button sends an ajax request (not in the code) with the resourceId. This all works. I want to show the server response in the Nova Modal.

My current solution (open modal on button click) only works for the last entry of the resources table or if only 1 result is available.

Here is my index component:

<template>
    <div>
        <div class="my-2">
...
            <button class="rounded-full py-1 px-2 text-xs bg-90 text-white" @click="openModal">{{__('Open Modal')}}</button>
            <portal to="modals">
                <transition name="fade">
                    <general-modal
                        v-if="modalOpen"
                        @confirm="confirmModal"
                        @close="closeModal"
                    />
                </transition>
            </portal>
        </div>
    </div>
</template>

this is the relevant JS part:

<script>
import GeneralModal from './GeneralModal.vue';
export default {
    props: ['resourceName', 'field'],
    data() {
        return {
            tags: [],
            modalOpen: false
        }
    },
    components: {
        GeneralModal
    },
    methods: {
        openModal() {
            this.modalOpen = true;
        },
        confirmModal() {
            this.modalOpen = false;
        },
        closeModal() {
            this.modalOpen = false;
        }
    },
    mounted() {
    }
}
</script>

I'm pretty sure it is because every field has the <portal> tag?

Any Ideas how to solve this?

I used the GeneralModal.vue code from this gist:
https://gist.github.com/blackfyre/ccd2a207948912594b5ac6cf67a11ef8