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

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"
 
 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?

CodePudding user response：

data is initially empty before mount. In this case you must tell typescript that it's okay if item 3 doesn't exist before mount by using optional chaining.

In your template: v-model="data.item3?.[0].item1"

Basically it allows nullish access.

Another approach would be to create a type/interface for your data with a full tree of the nested variables so typescript knows what exists.

interface myType {
  //... type info
};

const data = ref({} as myType);

CodePudding user response：

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"
         
         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"
         
         v-model="data['item3'][0].item1"
         />
</div>