Access each element of the object in array (vue + ts)

Question

TypeError: Cannot read properties of undefined (reading '0')
    at Proxy.render (form1.vue?4692:190:1)
    at renderComponentRoot (runtime-core.esm-bundler.js?5c40:893:1)


form1.vue?4692:190 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '0')
    at Proxy.render (form1.vue?4692:190:1)
    at renderComponentRoot (runtime-core.esm-bundler.js?5c40:893:1)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js?5c40:5030:1)
    at ReactiveEffect.run (reactivity.esm-bundler.js?a1e9:160:1)

Error Occurred

<input
 type="text"
 class="form-control"
 v-model="data['item3'][0].item1"
/>

data to:

item3: [
      {
        item1: 'SSS',
        item2: [{ item3: '2' }],
        item3: '',
        item4: '2',
        item5: '',
        item6: '',
        item7: '',
        item8: '',
        item9: '',
        item10: '1',
        item11: '1',
      },
    ],

vue page data to:

const data = ref<any>({});

onMounted(() => {
  data.value = props.modelValue;
  if (!data.value['sheetname']) {
    data.value = new E507().data;
    data.value.sheetname = props.sheet.templatename;
  }
  console.log(data.value);
});

data['item3'][0] Inaccessible. data['item3']?.[0] I couldn't do v-model in binding.

Is there a way to access the 0th object?

@Rajesh data to: ` item3: [ { item1: 'SSS', item2: [{ item3: '2' }], item3: '', item4: '2', item5: '', item6: '', item7: '', item8: '', item9: '', item10: '1', item11: '1', }, ], ` — peekpik
– peekpik, Commented Oct 25, 2022 at 5:53

Rohìt Jíndal · Accepted Answer · 2022-10-25 08:08:57Z

1

As per your data object, v-model should be item3[0].item1 instead of data['item3'][0].item1

Live Demo :

const vm = {
  data() {
    return {
      item3: [{
        item1: 'SSS',
        item2: [{
          item3: '2'
        }],
        item3: '',
        item4: '2',
        item5: '',
        item6: '',
        item7: '',
        item8: '',
        item9: '',
        item10: '1',
        item11: '1',
      }]
    }
  }
}

Vue.createApp(vm).mount('#app')

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.1/vue.global.js"></script>
<div id="app">
  <input
         type="text"
         class="form-control"
         v-model="item3[0].item1"
         />
</div>

Update : As you are using composition API, above answer will not work as it is using Options API. Here is the fix for composition API.

As we are updating the reference in the mounted hook, It will not load before the template render. Hence, Adding v-if="data.item3" in the input element will fix this issue.

Demo :

const { ref, onMounted } = Vue;

const vm = {
setup: function () {
    let data = ref({});
    onMounted(()=>{
      data.value = {
        item3: [{
          item1: 'SSS',
          item2: [{
            item3: '2'
          }],
          item3: '',
          item4: '2',
          item5: '',
          item6: '',
          item7: '',
          item8: '',
          item9: '',
          item10: '1',
          item11: '1'
        }]
      }
    })
    return {
      data
    }    
  }
}

Vue.createApp(vm).mount('#app');

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.1/vue.global.js"></script>
<div id="app">
<input
         v-if="data.item3"
         type="text"
         class="form-control"
         v-model="data['item3'][0].item1"
         />
</div>

edited Oct 25, 2022 at 8:08

answered Oct 25, 2022 at 6:31

Rohìt Jíndal

27.4k16 gold badges80 silver badges133 bronze badges

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

3 Comments

knary Over a year ago

He is using the composition API not the options API. His data object is a custom ref not the top level Vue data object.

knary Over a year ago

Because this is not an accurate reflection of how the OP's code works. The data object being referenced in the model is not the top level Vue data object but a custom ref (he is using the Vue composition API).

Rohìt Jíndal Over a year ago

@knary After spending some time, I updated my answer with the solution based on composition API. If possible can you please revert your downvote now.

Collectives™ on Stack Overflow

Access each element of the object in array (vue + ts)

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related