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

by

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>
👤Nikola Pavicevic

Leave a comment