这是我的前端代码:div class=Products table tr theach=product productStat $indexProducts thif=$productStatindex 3 == 0 td thattr=data-product-name=$pro
您可以尝试使用v-bind指令将data-product-name属性绑定到td元素上,并在click事件处理程序中传递该属性的值作为参数。以下是修改后的代码示例:
<div class="Products">
<table>
<tr th:each="product, productStat : ${indexProducts}" th:if="${productStat.index % 3 == 0}">
<td :data-product-name="product.name" @click="getDialogData($event.target.getAttribute('data-product-name'))">
<el-image class="ProductImage" th:src="${product.imgUrl}" :fit="'cover'"></el-image>
<span class="ProductName" th:text="${product.name}">product-name</span>
</td>
<td :data-product-name="indexProducts[productStat.index + 1].name" @click="getDialogData($event.target.getAttribute('data-product-name'))">
<el-image class="ProductImage" th:src="${product.imgUrl}" :fit="cover"></el-image>
<span class="ProductName" th:text="${indexProducts[productStat.index + 1].name}">product-name</span>
</td>
<td :data-product-name="indexProducts[productStat.index + 2].name" @click="getDialogData($event.target.getAttribute('data-product-name'))">
<el-image class="ProductImage" th:src="${product.imgUrl}" :fit="cover"></el-image>
<span class="ProductName" th:text="${indexProducts[productStat.index + 2].name}">product-name</span>
</td>
</tr>
</table>
<el-button type="primary" @click="dialogVisible = true">Click</el-button>
<el-dialog title="Tips" v-model="dialogVisible">
<div class="dialog">
<div class="dialogLeft">
<el-image class="dialogImage" src="" :fit="cover"></el-image>
</div>
<div class="dialogRight"></div>
</div>
</el-dialog>
</div>
通过将data-product-name属性绑定到td元素上,您可以在click事件处理程序中使用$event.target.getAttribute('data-product-name')获取该属性的值并传递给getDialogData方法。这样,您就可以将参数正确传递给方法了
原文地址: https://www.cveoy.top/t/topic/iUkm 著作权归作者所有。请勿转载和采集!