How do all the item in the list share the same component?

clipboard.png
such as the above requirement, each reject button needs to have a corresponding small Modal component. At present, I have set up a Modal

in each Item component.
// Item.js
<li>
  <Modal v-if="isShow">
</li>

but I don"t think it is necessary to generate a separate Modal. for each "reject" button Because there"s only one at the same time. But the question is, if I put this Modal in the parent component of the List (Item component, how should I control the location of the Modal (click a reject button and it will appear in the corresponding place)?

Mar.23,2022

getBoundingClientRect to learn about


in fact, you all use v-if and you don't have to consider multiple modal situations at all, because v-if itself is to add and delete this DOM node, you just need to locate it, and for each location you can get the element position of the reject button clicked through the js code, calculate the offset, and then set it. Of course, v-if has switching overhead, which can be ignored if it does not affect the normal loading of the page. About the portal in


data: {
    return {
     modelPotion: {
         left: 0,
         top: 0,
     }
     activeModelIndex: false,
     curItem: ''
    }
}

<li>
  <span></span>
  <span @click="handleRefuse($event,item)"></span>
</li>

// 
<Modal v-if="activeModelIndex" :item="curItem" :style="{ left: `${modelPotion.left}px`,top: `${modelPotion.top}px`}">


handleRefuse(event,item){
    console.log(event) //
    this.modelPotion = {
        left: event.x
        top: event.y
    }
    this.activeModelIndex = true
    this.curItem = item
}

React16?

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b2c15b-2b33c.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b2c15b-2b33c.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?