向母體發送輸入值 -有解無憂

我正在使用BootstrapVue，我試圖向我的父組件發射一個輸入值（這將被自動填充）。

我想發射這個值。<b-form-input :value="idChild.Autofill1"></b-form-input>到我的Parent。 <b-button class="col-md-4" v-b-toggle="'Parent' indexParent" variant='danger'> Parent {{indexParent 1}}< 與我的輸入值，但只有第一個自動填充的輸入（如果我應該有一個以上的自動填充輸入的元素）


它應該是這樣作業的。
示例步驟1到步驟2
以下是我的代碼
Parent.vue的代碼：
<template>
  <div> 
    < div class='inputArea mt-2' v-for='（idParentElement, indexParent) in inputs' : key='idParentElement. id'>
      <div class='row mb-3'/span>>
        < b-button class="col-md-4" v-b- toggle="'Parent' indexParent" variant='danger'/span>> Parent {{indexParent 1}}</b-button> 
      </div>/span>
      <Child :indexOfParent="indexParent" />
    </div>

    <div class='mt-3 mb-3 ml-3 mr-3'/span>>
      < b-button @click='addParent'/span> variant='success'/span>> 添加父母</b-button>
    </div>/span>
  </div>/span>
</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>/span>

我的Child.vue:
< template>
  <b-collapse : id="'Parent' indexOfParent" class='mt-2'> 

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

    <b-collapse :id="'newElement' indexOfParent indexChild"/span>>
      <div class='m-2 mt-3'/span>>
        <div class='row'> 
          <div class='col-md-6 m-1'> 
            <div class='mt-2'/span>> 輸入數字</div>。
            <b-form-input v-model="idChild。 Number" @input="searchForAutofill(idChild)"></b-form-input>/span>
          </div>/span>
        </div>/span>
        <div class='row'> 
          <div class='col-md-3 ml-1 mr-1'>/span>
            <div class='mt-2'/span>> 自動填充1</div> 
            <b-form-input :value="idChild。 Autofill1"></b-form-input>。
          </div>/span>             
        </div>/span>
      </div>/span>
    </b-collapse>/span>
    </div>/span>

    <div class='mt-4 mb-5 ml-3 mr-3'>/span>
      < b-button @click='addElement'/span> variant='block secondary' type='button'> 添加元素</b-button>
    </div>/span>

  </b-collapse>/span>
</template>


<script> 

export default {
  name: 'Child',

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

   
  data（） {
      return {
        inputs:[{}],
  }
};
</script> 


<style scoped>>
</style>/span>

預先感謝您對我的幫助！
 添加了圖片。
添加了圖片。更好的圖片 
uj5u.com熱心網友回復：
如果我的理解正確，你想得到這樣的東西。演示。https://codesandbox.io/s/elated-rumple-ewyyp 






        
      轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/333291.html
      標籤：
      上一篇：基于范圍內一系列數值的谷歌表條件格式化
下一篇：在不同的陣列中找到相同的陣列元素，并重命名為增量。