vue NOT re render with data change

Question

Vue renders v-if=true. But if I change bool true to false, vue doesn't re-render to v-else div.

How should it be? Is there any way to re-render?

Here is my code:

<template>
    <div v-if="bool">
        true
    </div>
    <div v-else>
        false // if button pressed, i should be shown!!!!
    </div>
    <button :click='onClickEvent()'>click!!!!!!</button>
</template>
<script>
    export default {
        data: function () {
            return {
                bool: true
            };
        },
        created() {
            
        },
        mounted(){
        
        }
        methods: {
            onClickEvent: function(){
                this.bool= false
            }
        }
    };
</script>

I tried everything I could think of.

Rawley Fowler · Accepted Answer · 2023-01-10 13:41:16Z

1

You should not be binding with :click instead it should be @click="onClickEvent".

https://vuejs.org/guide/essentials/event-handling.html

edited Jan 10, 2023 at 13:41

answered Jan 9, 2023 at 16:00

Rawley Fowler

3,13712 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Raukaute Over a year ago

Since no arguments are passed to the handler, there is no need to use inline handler style here. Instead, you'd go for @click="onClickEvent"

Rawley Fowler Over a year ago

@UliKrause I updated the answer to reflect this, thank you!

Collectives™ on Stack Overflow

vue NOT re render with data change

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related