有什么办法可以使用 document.getElementById 两次吗？

Question

我想添加悬停在按钮插槽上的类，但对于每个房间，插槽都具有相同的 ID，因此 document.getElementById 无法按要求工作。 有什么办法可以访问每个房间的插槽吗？我正在研究 Vue.js enter image description here

<w-col v-for="room in rooms" :id="room.dsid" :key="room.dsid" class="col">
                <ImageTitle
                    :id="room.dsid"
                    :name="room.space_name+' '+room.building_name"
                    :src="room.image_url"
                    @infoClick="showPopOver"
                ></ImageTitle>
                <div v-for="(n,index) in 48" :key="index" class="slot">
                    <w-button :id="n" raw class="slots" :class="{ 'border-top': index === 0 || index%4 === 0, 'border-bottom': index === 47}" @mouseover.native="mouseOver(n, room.dsid)" @mouseleave.native="mouseLeave()" @click="selectSlot(n, room.name)">
                        <w-row></w-row>
                    </w-button>
                </div>
</w-col>