Can't pass spring model value on @click method in vue js

According to the requirement of a client, I have been working on a project where I am using Vue js with thymeleaf. While integrating Vue js with thymeleaf, I am facing an issue where I cann't pass spring model value to Vue js @click method. The code snippet are give bellow

<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>

You can see for pagination purpose, I need to call a method @click="getActivityList('${activityPage.number}')"with page number. But activityPage.number cann't be parsed. I tried different way, but didn't get any result. I have tried using @click="getActivityList('${activityPage.number}')", @click=getActivityList("${activityPage.number}") @click=getActivityList({{ activityPage.number }}) but nothing special happened. As I am new in vue js, it making me very uncomfortable. Any help will be appriciated.

Solution

(EDIT: I've updated some of the information after I had a chance to try it out)

You need to tell Thymeleaf that it is supposted to interpret the value, or else it will simply take the value literially. That is what Thymeleaf's th:* attributes are for, so you need to use one of those.

It is actually possible simply to use th:@click or th:v-on:click, because Thymeleaf has a fallback mechanism for unknown attributes.

Otherwise you also can use th:attr which also allows you to create any attribute in Thymeleaf.

Since we'll have three levels of quotes (and Thymeleaf doesn't properly support " properly IMO) the syntax is a bit tricky. You'll need to use " instead of " inside the attribute values. Also the attribute names need to be quoted as well, when they contain @ or ::

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

or using Thymeleaf's literal substitution syntax with |...|:

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