Vue 3 composition API: can not access reactive array value programmatically, only in template

Question

In a component, i defined a reactive constant (isn't that paradox?) like this:

const form = reactive({
    name: null,
    fruits: new Array(),
})

The value for name is set via a text input field. The value for fruits is set via a group of checkboxes.

when i want to get the values of each programmatically using this function:

const makeObj = () => {
    console.log("form.name", form.name)
    console.log("form.fruits", form.fruits)
}

... i can only access form.name, but form.fruitsreturns some Proxy object:

BUT: I can access the elements of the array directly with form.fruits[0]returning the first item, e.g. Banana.

Question: How can i access the array value of form.fruits? Do i have to convert the reactive array form.fruits to a "normal" array somehow?

Thanks for your help!

I cannot reproduce your problem. If you don't get a decent answer soon, please consider creating and posting a valid minimal reproducible example code post in your question. The link should explain this. — Hovercraft Full Of Eels
– Hovercraft Full Of Eels, Commented Jan 23, 2023 at 19:52
How does the answer solve your issue -- again, what exactly is your issue?? — Hovercraft Full Of Eels
– Hovercraft Full Of Eels, Commented Jan 23, 2023 at 20:05
Thank you! For anybody who is also confused by the string representation of the reactive array: check JSON.stringify(form.fruits) — Lucien Chardon
– Lucien Chardon, Commented Jan 23, 2023 at 20:09
Sigh, please see my wasted efforts on this issue, time that can no longer be retrieved. In the future, please show more and explain more, including a minimal reproducible example. — Hovercraft Full Of Eels
– Hovercraft Full Of Eels, Commented Jan 23, 2023 at 20:14

Nikola Pavicevic · Accepted Answer · 2023-01-23 19:52:52Z

1

Proxy is Vue’s reactivity system that allows to track dependencies and changes to the array. Pretend it isn't there :) You can do with it everything you can with plain array.

const { reactive, onMounted } = Vue
const app = Vue.createApp({
  setup() {
    const form = reactive({
      name: null,
      fruits: new Array()
    })
    const makeObj = () => {
      form.name = 'aa'
      form.fruits = [1,2,3]
      console.log("form.name", form.name)
      console.log("form.fruits", form.fruits)
    }
    onMounted(() => {
      makeObj()
    })
    return { form }
  },
})
app.mount('#demo')

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  {{ form }}
</div>

answered Jan 23, 2023 at 19:52

Nikola Pavicevic

23.6k9 gold badges30 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Lucien Chardon Over a year ago

Thanks for clearing this up. your example gives me exactly the same result on the console as i get, with this Proxy object as a return value instead of the values of the array. I am not working with JS on a regular basis, pardon my question. I was confused with the string representation of the console.log output. So i ran JSON.stringify(form.fruits)seeing that it gives exactly the expected result.

Collectives™ on Stack Overflow

Vue 3 composition API: can not access reactive array value programmatically, only in template

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related