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?

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