Vue.js/Vuetify 3 - 更改主题会产生“无法分配给“名称”，因为它是只读属性”错误

Question

我正在尝试使用按钮在浅色模式和深色模式之间切换我的 vuetify 3 主题。

似乎 Vuetify 文档 使用

theme.global.name

设置主题，但这不起作用，因为它是只读属性。

有解决办法吗？

下面是我的代码片段：

<script lang="ts">
import { useTheme } from 'vuetify'

export default {
  data() {
    return {
      theme: useTheme()
    }
  },
  methods: {
    toggleTheme() {
      this.theme.global.name = this.theme.global.current.dark ? 'light' : 'dark'
    }
  }
}
</script>

这是产生的错误消息：

Cannot assign to 'name' because it is a read-only property.ts(2540)

Answer 1

我想你尝试在

.value

之后添加

name

。因为我在文件中看到他们使用：

<script setup>
import { useTheme } from 'vuetify'

const theme = useTheme()

function toggleTheme () {
  theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
}
</script>