'I want to retrieve the html attribute of a link and apply to a modal button

I have a list of links and a modal that pops up on click. All i want to achieve is whenever i click on any of the links, retrieve the html attribute of that link and apply to the modal button.

<body x-data="{ extModal : false }">
    <ul>
        <li><a @click="extModal = !extModal" href="http://examplelink-1.com"></a></li>
        <li><a @click="extModal = !extModal" href="http://examplelink-2.com"></a></li>
        <li><a @click="extModal = !extModal" href="http://examplelink-3.com"></a></li>
    </ul>
    <div x-show="extModal">
        <h2>External Link Alert</h2>
        <p>Are you sure you want to leave this site?</p>
        <button @click="extModal = false">No</button>
        <!-- Dynamic link update -->
        <a href="" @click="extModal = false" target="_blank">Yes</a>
    </div>
</body>

Solution 1:^[1]

Hi and welcome @demeyo.

I am currently on my phone and can not test it, but I will try to explain how you could simply achieve what you want.

Create a reactive data property (f.e. "activeLink").
Bind that property to your href attribute.
Update that property on click by accessing the target element.

That could look like follows:

<body x-data="{ extModal : false, activeLink: '' }">
    <ul>
        <li><a @click="extModal = !extModal; activeLink = $event.target.getAttribute('href')" href="http://examplelink-1.com"></a></li>
        <li><a @click="extModal = !extModal; activeLink = $event.target.getAttribute('href')" href="http://examplelink-2.com"></a></li>
        <li><a @click="extModal = !extModal; activeLink = $event.target.getAttribute('href')" href="http://examplelink-3.com"></a></li>
    </ul>
    <div x-show="extModal">
        <h2>External Link Alert</h2>
        <p>Are you sure you want to leave this site?</p>
        <button @click="extModal = false">No</button>
        <!-- Dynamic link update -->
        <a :href="activeLink" @click="extModal = false" target="_blank">Yes</a>
    </div>
</body>

Hint: You could use the x-for directive to loop over your links and render them.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	demhadesigns

'I want to retrieve the html attribute of a link and apply to a modal button

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]