Vue 3 组合 api 计算属性 = 模板未更新

Question

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}

Answer 1

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