Popover works within the page but not within the component
I wish to have a popover appear when a user selects a certain radio button - I put the radio button selections in its own SFC but the pop doesn't work within the SFC. But if I put it in the page it works fine.
My SFC contains the following:
setup(){
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
}
And the <template>
<input type="radio" class="btn-check" name="options" id="option1" autocomplete="off" checked>
<label class="btn btn-secondary" for="option1">Checked</label>
<input type="radio" class="btn-check" name="options" id="option2" autocomplete="off"
data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Popover Message"
>
<label class="btn btn-secondary" for="option2">Radio</label>
In my page I have wrapped ClientOnly around the component. But the following radio selection I placed in the page of the component that works is:
<div>
<input type="radio" class="btn-check" name="options" id="option1" autocomplete="off" checked>
<label class="btn btn-secondary" for="option1">Checked</label>
<input type="radio" class="btn-check" name="options" id="option2" autocomplete="off"
data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="We cannot accomodate 5th Wheels longer than 40ft and Travel Trailers longer than 36ft"
>
<label class="btn btn-secondary" for="option2">Radio</label>
I am using bootstrap and I have imported the component in the page.
Can anyone help me get popover working within the component?1 Reply
OK it turns out I wasn't initializing it right.
mounting
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
in the component got it to work