Javascript Can'；t在vue js中的@click方法上传递弹簧模型值

根据一位客户的要求，我一直在从事一个项目，在该项目中，我将Vue js与thymeleaf结合使用。在将Vue js与thymeleaf集成时，我面临一个无法将spring模型值传递给Vue js@click方法的问题。下面给出了代码片段

<div class="activityList" xmlns:th="http://www.w3.org/1999/xhtml"
     xmlns:v-on="http://www.w3.org/1999/xhtml" id="activity">
    <div class="row text-center">
        <p class="text-center" style="color: red;" th:text="${userMessage}"></p>
        <table class="table">
            <thead>
            <tr>
                <th th:text="#{activity.date}"></th>
                <th th:text="#{activity.time}"></th>
                <th th:text="#{activity.type}"></th>
                <th th:text="#{activity.status}"></th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="activity : ${activityPage.content}">
                <td th:text="${activity.activityDate}"></td>
                <td th:text="${activity.activityTime}"></td>
                <td th:text="${activity.activityType}"></td>
                <td th:text="${activity.status}"></td>
            </tr>
            </tbody>
        </table>

        <div th:if="${activityPage.totalPages > 0}"
             class="form-group col-md-11 pagination-centered">
            <ul class="pagination justify-content-center">

                <li th:class="${activityPage.number == 0} ? disabled">
                    <a class="page-link"
                        @click="getActivityList('${activityPage.number}')">Previous</a>
                </li>

                <li th:class="${activityPage.number == page } ? 'active pointer-disabled'"
                    th:each="page : ${#numbers.sequence(startPage, endPage)}">
                    <a class="page-link"
                       @click="getActivityList('${activityPage.number}')"
                       th:text="${page}" th:value="${page}"></a>
                </li>
                <li th:class="${activityPage.number + 1 == activityPage.totalPages} ? disabled">
                    <a class="page-link" @click=getActivityList("${activityPage.number}")
                    >Next</a>
                </li>
            </ul>
        </div>
    </div>
    <script>
        var activity = new Vue({
            el: '#activity',
            data: {},
            methods: {
                getActivityList(e) {
                    alert("checking pagination " + e)
                }
            }
        });
    </script>
</div>

以前的




下一个


var活动=新的Vue({
el:'活动'，
数据：{}，
方法：{
getActivityList（e）{
警报（“正在检查分页”+e）
}
}
});

您可以看到，为了分页，我需要调用一个带有页码的方法

@click=“getActivityList（'${activityPage.number}'）”

。但是无法解析

activityPage.number

。我尝试了不同的方法，但没有得到任何结果。我尝试过使用

@click=“getActivityList（'${activityPage.number}'）”

，

@click=getActivityList（${activityPage.number}”）

---

@click=getActivityList（{{activityPage.number}}）

但没有发生任何特殊情况。因为我是vue js的新手，这让我很不舒服。任何帮助都会收到。

您不能像在一个文件中那样使用vue js和thymeleaf，最简单的方法是使用vue js重写这部分代码。 您可以在CDATA中传递活动对象，它将在vue js模板文件中可见。

（编辑：我在有机会尝试后更新了一些信息）

您需要告诉Thymeleaf，支持它解释该值，否则它将直接接受该值。这就是Thymeleaf的

th:

属性的用途，因此您需要使用其中一个属性

实际上可以简单地使用

th:@click

或

th:v-on:click

，因为Thymeleaf有一个用于未知属性的回退机制

否则，您还可以使用

th:attr

，这也允许您在Thymeleaf中创建任何属性

由于我们将有三个级别的引号（Thymeleaf在IMO中不正确地支持

”

），语法有点棘手。您需要在属性值中使用

“

而不是

”

。当属性名称包含

@

或

：

时，也需要引用它们：

<a th:attr="'@click'='getActivityList(&quot;' + ${activityPage.number} + '&quot;)">

---

在以下语法中使用反勾号而不是引号：getActivityList（`${activityPage.number}`）。虽然这也可以使用：getActivityList（activityPage.number）@IgorMoraru我也使用了

getActivityList（activityPage.number）

。但是什么都没有发生。请给出完整的语法好吗？@IgorMoraru像这样一个

@click=”getActivityList（“\${activityPage.number}\”）“

？仔细看这个：getActivityList（`${activityPage.number}”）。在这里，

'

字符被替换为

`

（${activityPage.number}

）

和

getActivityList（

${activityPage.number}

）“

。但是什么也没发生：'（这是可能的。语法不是很好。非常感谢你罗托拉！我希望我能给你更多的选票！你救了我的命！！

<a th:attr="'@click'=|getActivityList('${activityPage.number}')|">