V-on: щелкните не работает на vue.js, какие бы настройки я ни делал, как я могу это исправить?

Я запускаю vue.js внутри экспресс, все работает как задумано, за исключением события щелчка ... Он ничего не делает, когда я нажимаю любую кнопку, ничего не запускается

HTML:

<div v-on:click = "function2">
    <button type = "button" class = "btn btn-primary" @click.native = "testFunction">Function 1</button>
    <button type = "button" class = "btn btn-primary" v-on:click = "function2">Function 2</button>
</div>

Сервер

app.get('*', async(req, res) => {
const app2 = createSSRApp({
    data (){
        return {
            url: req.url,
            message : 'ok',
            ok : true,
            image : '...'
        }
    },
    methods : {
        testFunction(event){
            this.$emit('click', this.page, event);
        },
        function2(){
            console.info('9')
        }
    },
    template : require('fs').readFileSync('./html/pages/home.html', 'utf-8')
})
const content = await renderToString(app2)

const html = `
        <!DOCTYPE html><script>
        console.info('ooo')
    </script>
        <html lang = "en">
        <head><title>Hello</title></head>
        <body>${content}</body>
        </html>
    `
    res.end(html)
})

Я использую экспресс и ssr.

Я даже поместил встроенный javascript в заголовок для проверки и в заголовок, он работает, но не в щелчке даже

Вы не читали часть в нижней части документации. * Теперь при запуске этого сценария Node.js мы видим статическую HTML-страницу на localhost: 8080. Однако этот код не гидратирован: Vue еще не принял статический HTML, отправленный сервером., чтобы превратить его в динамическую DOM, которая может реагировать на изменения данных на стороне клиента. Это будет рассмотрено в разделе «Гидратация на стороне клиента». см .: ssr.vuejs.org/guide/hydration.html

— 04.04.2021 00:32

документация по SSR оооочень бедная ... Может кто-нибудь объяснить? Потому что способ, которым это должно быть сделано, отличается от документа vue3

— 04.04.2021 00:45

v3.vuejs.org/guide/ssr/getting-started.html - это руководство в настоящее время находится в активной разработке ~ используйте Nuxt, если вам нужен простой SSR

— 04.04.2021 00:48

vue.js vuejs3

04.04.2021 00:25

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

Ответы 1

Вы используете @click в

<button type = "button" class = "btn btn-primary" @click.native = "testFunction">Function 1</button>

и вы также используете v-on:click в

<button type = "button" class = "btn btn-primary" v-on:click = "function2">Function 2</button>

Итак, @click = "addTwo" такой же, как v-on:click = "addTwo".

Руководство по стилю Vue.js рекомендует не смешивать их в своем проекте. Используйте @ или v-on, но не оба одновременно.

Сначала я пробовал только с v-on .... потом попробовал с @, потом смешал, чтобы перепроверить. ничего не работает, по-видимому, необходимо выполнить гидратацию, но на странице vue3 нет документации

— 04.04.2021 03:31

04.04.2021 02:37