Emit input value to Parent-CodePudding

I'm working with BootstrapVue and I try to emit a input value (this will be autofilled) to my Parent Component.

I want to emit this value: <b-form-input :value="idChild.Autofill1"></b-form-input> to my Parent.vue and there I want to overwrite "{{indexParent 1}}" in this code line <b-button class="col-md-4" v-b-toggle="'Parent' indexParent" variant='danger'>Parent {{indexParent 1}}</b-button> with my inputed value, but only the first Autofilled input (in case I should have more than one elements with autofilled input)

This is how it should work: Example Step 1 to Step 2

Here are my codes for Parent.vue:

<template>
  <div>
    <div class='inputArea mt-2' v-for='(idParentElement, indexParent) in inputs' :key='idParentElement.id'>
      <div class='row mb-3'>
        <b-button class="col-md-4" v-b-toggle="'Parent' indexParent" variant='danger'>Parent {{indexParent 1}}</b-button>
      </div>
      <Child :indexOfParent="indexParent" />
    </div>

    <div class='mt-3 mb-3 ml-3 mr-3'>
      <b-button @click='addParent' variant='success'>Add Parent</b-button>
    </div>
  </div>
</template>


<script>

import Child from './child.vue'

export default {
  name: 'Parent',
  components: {
    Child,
  },
 
  data() {
    return {
      inputs: [{
      }],
    }
  },

  methods: {
    addParent() {
      this.inputs.push({
      })
    },
  },  
}
</script>


<style scoped>
</style>

my Child.vue:

<template>
  <b-collapse :id="'Parent' indexOfParent" class='mt-2'>

    <div class='inputArea mt-2' v-for='(idChild, indexChild) in inputs' :key='indexChild'>
    <b-button v-b-toggle="'newElement' indexOfParent indexChild" variant='secondary btn-block'>Element {{indexChild 1}}</b-button>

    <b-collapse :id="'newElement' indexOfParent indexChild">
      <div class='m-2 mt-3'>
        <div class='row'>
          <div class='col-md-6 m-1'>
            <div class='mt-2'>Input Number</div>
            <b-form-input v-model="idChild.Number" @input="searchForAutofill(idChild)"></b-form-input>
          </div>
        </div>
        <div class='row'>
          <div class='col-md-3 ml-1 mr-1'>
            <div class='mt-2'>Autofill 1</div>
            <b-form-input :value="idChild.Autofill1"></b-form-input>
          </div>             
        </div>
      </div>
    </b-collapse>
    </div>

    <div class='mt-4 mb-5 ml-3 mr-3'>
      <b-button @click='addElement' variant='block secondary' type='button'>Add Element </b-button>
    </div>

  </b-collapse>
</template>


<script>

export default {
  name: 'Child',

  methods: {
    addElement() {
      this.inputs.push ({
      });
    }, 

   
  data() {
      return {
        inputs:[{}],
  }
};
</script>


<style scoped>
</style>

Thanks in advance for helping me out!

Added picture: Better Image

CodePudding user response：

If i all understand correct you want to get something like this. Demo: https://codesandbox.io/s/elated-rumple-ewyyp