child의 @change 이벤트에서 선택된 행 인덱스를 가져오는 방법 요소 UI에서 선택 드롭다운?

child의 @change 이벤트에서 선택된 행 인덱스를 가져오는 방법 요소 UI에서 선택 드롭다운?

여러 입력 요소 중 하나가 있는 목록을 생성하는 중<el-select>. 이 선택 메뉴를 변경하면 해당 선택 항목으로 한정된 값을 얻을 수 있다.그러나 여기서 의문점은 항목에 대한 상위 v-의 인덱스/행 번호도 얻기를 원한다는 것이다.다음 코드에서 무슨 뜻인지 알 수 있을 겁니다.

<el-form-item v-for="(domain, index) in Prescription.domains">
    <div class="col-md-2" v-if="medicineIsSelected === true">
        <small>Select Brand:</small>
        <el-select v-model="domain.SelectedBrand" clearable placeholder="Select" @change="updateDropdowns"> <!-- Here I want to pass {{index}} also -->
          <el-option
            v-for="item in selectedMedicineMetaInfo.BrandName"
            :key="item.value.name"
            :label="item.value.name"
            :value="item.value.rxcui">
          </el-option>
        </el-select>
    </div>
</el-form-item>

위의 코드에서 볼 수 있듯이, 나는 인덱스를 전달하고 싶다.updateDropdowns. updateDropDropdowns(index)를 전달하려고 했는데, 여기서 인덱스 번호를 얻었지만 선택한 드롭다운 값을 잃어버렸다.어떻게 하면 둘 다 합격할 수 있을까?

해결책은 다음과 같다.

@change="updateDropdowns(index, $event)"

$이벤트를 사용하여 현재 이벤트를 참조할 수 있다.

사용자 지정 이벤트를 사용하여 관리 가능

<div>
   <child @clicked="ongetChild"></child>
</div>

== 아이 ===

드롭다운 변경 사항을 관찰하십시오.

export default {
 watch: {
 'domain.SelectedBrand':function(value) {
   this.$emit('clicked', 'value')
 }
}}

=== 부모 ==

export default {
 ongetChild (value) {
  console.log(value) // someValue
  }
 }
}

사용하다@change="updateDropdowns"에el-select꼬리표를 달다

vue 메서드 사용:

updateDropdowns(index) {
    this.selectedMedicineMetaInfo.BrandName[index-1]; // this gives selected option details
}

참조URL: https://stackoverflow.com/questions/51184290/how-to-get-selected-row-index-on-change-event-of-child-select-dropdown-in-eleme