我有一个链接列表和点击弹出的模态。所有我想要实现的是，每当我点击任何链接，检索该链接的html属性，并适用于模态按钮。
<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>
大家好，欢迎@demeyo。
我现在正在使用我的手机，无法测试它，但我会尽量解释如何简单地实现你想要的。
- 创建一个响应数据属性(例如:"activeLink")
- 将该属性绑定到你的href属性。
- 通过访问目标元素来更新该属性。
可以像这样:
<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>
提示:你可以使用x-for指令来遍历你的链接并渲染它们。