CODEWITHSUNDEEP
javascriptvue.jsvuejs3
Sam
Sam

Reputation: 1828

Vue 3 composition api computed property = template not updated

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}

Upvotes: 2

Views: 972

Answers (1)

Nikola Pavicevic
Nikola Pavicevic

Reputation: 23480

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)
  }
}

Upvotes: 2

Related Questions