I have a computed property but it is not working
I can see that currentMode is changing with the console.log
but my template is not updating
template:
<div v-if="editMode"></div>
setup:
setup(props, context) {
let currentMode = null
const modes = {
view:'view',
edit:'edit',
create:'create'
}
const editMode = computed(() => {
return currentMode === modes.edit
});
const toggleMode = () => {
if (currentMode === modes.edit ){
currentMode = modes.view
console.log(currentMode)
return
} else {
currentMode = modes.edit
console.log(currentMode)
}
}
return {editMode, toggleMode}
Try to make modes reactive
let currentMode = ref(null)
const modes = ref({
view:'view',
edit:'edit',
create:'create'
})
const editMode = computed(() => {
return currentMode.value === modes.value.edit
});
const toggleMode = () => {
if (currentMode.value === modes.value.edit ){
currentMode.value = modes.value.view
console.log(currentMode.value)
return
} else {
currentMode.value = modes.value.edit
console.log(currentMode.value)
}
}