Не работает метод элемента vue

Question

У меня есть вот такой несложный код на vue.js, который переворачивает запись при нажатии на неё:

<!doctype html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<script src="./vue.js"></script>
<div id="app">
    <h1 v-on:click="reverse" v-bind:style="message_style">
        {{message}}
    </h1>
</div>
<script>
    let app = new Vue({
            el: '#app',
            data: {
                message: "Hello vue",
                message_style: 'cursor: pointer;'
            },
            methods: {
                reverse: function () {
                    this.message = this.message.split('').reverse().join('')
                }
            }
        }
    )
</script>
</body>
</html>

Теперь я хочу связать это с express, и следуя инструкции тут - https://ssr.vuejs.org/ru/guide/#%D1%83%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0 получаю следующий код:

const server = require('express')()
const vue = require('vue')
const renderer = require('vue-server-renderer').createRenderer()

server.get('/', (req, res) => {
    const vue_app = new vue({
            data: {
                message: "test message",
                message_style: "cursor: pointer;"
            },
            methods: {
                reverse: function () {
                    this.message = this.message.split('').reverse().join('')
                }
            },
            template: `
                <div>
                    <h1 v-on:click="reverse" v-bind:style="message_style">
                        {{message}}
                    </h1>
                </div>`
        }
    )
    renderer.renderToString(vue_app, (err, html) => {
        if (err) {
            console.log('following error occurred: ' + err)
        }
        res.end(`
        <!doctype html>
        <html lang="ru">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport"
                  content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
            <title>Document</title>
        </head>
        <body>
            ${html}
        </body>
        </html>
        `)
    })
})

server.listen(3000, () => {
    console.log('server started successfully')
})

Сервер запускается, текст отображается, но при нажатии на него ничего не происходит. Почему не работает метод reverse и как это исправить? Спасибо.

БЛОГ НА HUSL

Не работает метод элемента vue

Ответы (0 шт):