Api композиции Vue не работает, данные не заданы с извлеченными данными из базы данных

#vue.js #vuejs3 #vue-composition-api

Вопрос:

Опробовал API композиции Vue 3, чтобы написать лучший код, но я не могу заставить его работать так, как я хотел. Я не могу получить значения для обновления с помощью значений из базы данных.

 // 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>
 

Ответ №1:

Вы неправильно размещаете поле value при использовании ref свойства, оно должно быть :

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