Vue.js 中使用 Thymeleaf 传递参数到方法

<div class='Products'>
                <table>
                    <tr th:each='product, productStat : ${indexProducts}' th:if='${productStat.index % 3 == 0}'>
                        <td>
                            <el-image class='ProductImage' th:src='${product.imgUrl}' :fit=''cover''></el-image>
                            <span class='ProductName' th:text='${product.name}'>product-name</span>
                        </td>
                        <td @click='getDialogData(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 @click='getDialogData(indexProducts[productStat.index + 2].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>
<script>
                const {ref} = Vue
                const products = createApp({
                    data() {
                        return {
                            dialogVisible: ref(false),
                            dialogData: ref({})
                        }
                    },
                    methods:{
                        getDialogData(name){
                            const _this = this
                            _this.dialogVisible = true
                            console.log('name: '+name)
                            axios({
                                url: 'http://localhost:8080/index/getProduct',
                                method: 'get',
                                params: {
                                    name: name
                                }
                            }).then(function (resp){
                                console.log(resp.data)
                            })
                        },
                    }
                }).use(ElementPlus).mount('.Products')
            </script>
<p>你可以尝试通过在点击事件中使用<code>v-bind</code>绑定参数的方式来传递参数给<code>getDialogData</code>方法。具体代码如下：</p>
<pre><code class="language-html">&lt;td @click='getDialogData(product.name)'&gt;
    &lt;el-image class='ProductImage' th:src='${product.imgUrl}' :fit='cover'&gt;&lt;/el-image&gt;
    &lt;span class='ProductName' th:text='${product.name}'&gt;product-name&lt;/span&gt;
&lt;/td&gt;
</code></pre>
<p>在上述代码中，我将<code>click</code>事件绑定到<code>getDialogData</code>方法，并使用<code>v-bind</code>将<code>product.name</code>作为参数传递给该方法。这样，当你点击<code>td</code>元素时，<code>getDialogData</code>方法将接收到正确的参数。</p>
<p>希望对你有帮助！</p>