[Vuejs]-Access each element of the object in array (vue + ts)

by

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>
👤Debug Diva

Leave a comment