0

I want to add class on hovering on button slots but for every room the slots have same id, so document.getElementById is not working as per the requirement. Is there any way i can access slots for every room? I am working on 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>
Waqar Ahmad
  • 19
  • 3
  • You shouldn't have multiple elements with the same `id`: [Can multiple different HTML elements have the same ID if they're different elements?](https://stackoverflow.com/questions/5611963) – adiga Jun 15 '21 at 08:29
  • It is not valid for multiple elements to have the same ID. Browsers salvage what they can and won't complain that your HTML is invalid, but you cannot fetch two different elements by the same ID using `getElementById`. Use another attribute, for example [`data-room`](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). You can fetch them using e.g. [`document.querySelectorAll('[data-room="roomID"]')`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll), if you need to. – Amadan Jun 15 '21 at 08:29
  • 2
    Also, why do you need the DOM API? You can use the Vue methods and `data` to manipulate the DOM – adiga Jun 15 '21 at 08:31
  • 2
    `querySelectorAll` will return all results for identical ID's - but, if you're using DOM methods with vue, you are *doing it wrong™* – Jaromanda X Jun 15 '21 at 08:44
  • @adiga how can i change id after every iteration for button? – Waqar Ahmad Jun 15 '21 at 09:10
  • Use `ref` instead of `id` - then you can refer to them by `this.$refs.roomId[0...numRooms-1]` – IVO GELOV Jun 17 '21 at 05:56

0 Answers0