CODEWITHSUNDEEP
vue.jsvuejs3
Joaquim Antonio Kapel
Joaquim Antonio Kapel

Reputation: 336

v-on:click not working on vue.js no matter what tweaks I do, how can I fix this?

I am running vue.js inside express, all works as intended eccept for the click event... It does not do anything, when I click on either button, nothing is fired

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

The server

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.log('9')
        }
    },
    template : require('fs').readFileSync('./html/pages/home.html', 'utf-8')
})
const content = await renderToString(app2)

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

I am using express and ssr.

I even put some inline javascript in the header to check and in the header, it works, but not in the click even

Upvotes: 1

Views: 2977

Answers (1)

user9900365
user9900365

Reputation:

You are using @click in

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

and you also use v-on:click in

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

So @click="addTwo" is the same as v-on:click="addTwo"

The Vue.js style guide recommends to not mix them in your project. Use @ or v-on but not both.

Upvotes: 1

Related Questions