Vue 组合 api 不工作，未使用从数据库中提取的数据设置数据

Question

尝试使用 Vue 3 组合 API 来编写一些更好的代码，但我无法像我想的那样让它工作。我无法获取要使用数据库中的值进行更新的值。

// component part
<template>
    <SomeChildComponent :value="settings"/>
</template>

// script part
<script>
import { ref, onMounted} from 'vue'
export default {
setup() {

    let settings = ref({
      active : 1,
      update : 0,
      ...
    })

    // this wont change the values
    const getSettingsValues = async () => {  
          const response = await axios.get('/api/settings')// works

          settings.active.value = response.data.active;//undefined
          settings.update.value = 1;//undefined (even with hardcoded value)
          [and more]

     }
     getSettingsValues()

     return { settings };
}
}
</script>

Answer 1

当您使用 ref 属性时，您放错了字段 value，它应该是：

settings.value.active= response.data.active;
settings.value.update= 1

Vue 组合 api 不工作，未使用从数据库中提取的数据设置数据

Vue composition api not working, data not set with the extracted data from the dabase

vue.js

vuejs3

vue-composition-api