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

Question

我有一个计算属性，但它不工作

我可以看到currentMode随着console.log的变化

但我的模板没有更新

模板： <div v-if="editMode"></div>

设置：

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

尝试让模式反应

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