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.
CodePudding user response：
In your code, you are changing the value of bool to false when the button is clicked, but you are not seeing the v-else block being rendered.
you can use Vue.set() to make the bool data property reactive:
data: function () {
return {
bool: true
};
},
methods: {
onClickEvent: function(){
Vue.set(this, 'bool', false)
}
}
CodePudding user response：
You should not be binding with :click instead it should be @click="onClickEvent.