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