0

I am assigning an array from an axios response to the reactive state object. The array is assigned by state.value.headings={...} to the state.headings object, which is an array itself.

This is the script element from my vue3 component:

<script setup>
import {ref} from 'vue';

const state = ref({
    headings: {},
    content: {},
    image: "",
})

axios.get('/home')
    .then(res => {
        const data = res.data[res.data.length - 1]

        state.value.headings = {
            en: data['heading_(en)'],
            de: data['heading_(de)'],
            ar: data['heading_(ar)'],
        }
    })

console.log(state)
console.log(state.value)
console.log(state.value.headings)
console.log(state.value.headings.en)

</script>

This way I can access the content of state in this vue3 component like so:

<h2>{{ state.headings.en }}</h2>

But how do I access for example the state.headings array inside the console? I am trying to investigate state like so:

console.log(state):

RefImpl {_shallow: false, dep: undefined, __v_isRef: true, _rawValue: {…}, _value: Proxy}
dep: Set(1) {ReactiveEffect}
__v_isRef: true
_rawValue: {headings: {…}, content: {…}, image: ''}
_shallow: false
_value: Proxy {headings: {…}, content: {…}, image: ''}
value: Proxy
[[Handler]]: Object
[[Target]]: Object
content: {}
headings: {en: 'Stutt:Ard', de: 'Stutt:Ard (de)', ar: 'شتوت أرد'}
image: ""
[[Prototype]]: Object
[[IsRevoked]]: false
[[Prototype]]: Object

console.log(state.value):

Proxy {headings: {…}, content: {…}, image: ''}
[[Handler]]: Object
[[Target]]: Object
[[IsRevoked]]: false

console.log(state.value.headings):

Proxy {}
[[Handler]]: Object
[[Target]]: Object
[[IsRevoked]]: false

console.log(state.value.headings.en):

undefined

console.log(state) shows that state.value.headings carries the strings, that I want to access in the console but state.value.headings.en returns undefined. How can I target and output them in the console?

Edit:

Unfortunately from the outputs I have pasted, the parent/child relationships of the objects cannot be seen. The parent/child relationship of the object I'm after is state.value.headings.en.

Edit2:

Investigating console.log(state.value.headings) does not uncover the content of the headings object but it should be somewhere in there? I don't understand the Proxy object yet.

Artur Müller Romanov
  • 4,417
  • 10
  • 73
  • 132
  • 1
    axios is asynchronious, so the log statements at the current position will always be the state how you created it and not when the axios response updated it. Put the log statement in the `then` and you should see the value. Also, if you use `reactive` instead of `ref` as I mentioned in your other question, you don't need the `.value` part. – Thomas Oct 26 '21 at 08:22
  • Thank you, your input is very valuable :-) – Artur Müller Romanov Oct 26 '21 at 08:24
  • Also see https://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-asynchronous-call . As for proxy, check the contents of [[Target]] . You can always flatten it with JSON stringify/parse, if it's JSON-compatible. – Estus Flask Oct 26 '21 at 08:25

0 Answers0