b-table의 확인란과 관련된 bootstrap-vue 문제

b-table의 확인란과 관련된 bootstrap-vue 문제

체크박스를 올바르게 동작시키는 데 문제가 있습니다.선택한 슬롯의 각 행에 대해 렌더링되는 확인란이 올바른 행에 바인딩되지 않습니다.확인란을 클릭하면 맨 위 행의 확인란이 참/거짓 위치로 설정됩니다.

질문: 1) 행 체크박스의 참/거짓 상태를 행 항목에 바인드하려면 어떻게 해야 합니까?선택한 data.item.selected에 바인드한 후 데이터를 루프하여 선택한 개체를 찾아 필요한 작업을 수행하려고 합니다.행 개체를 새 데이터 배열에 추가하려고 했는데 맨 위 행만 추가됩니까?

2) HEAD_selected slot 체크박스를 기반으로 모든 행 체크박스의 True/False를 설정하는 가장 좋은 방법은 무엇입니까?

코드:

<b-table 
  striped 
  hover 
  outlined 
  :items="schools" 
  :fields="fields"
  :per-page="perPage"
  :current-page="currentPage"
  :total-rows="totalRows"
  :sort-by.sync="sortBy"
  :sort-desc.sync="sortDesc">

  <template slot="HEAD_selected" slot-scope="data">
    <b-form-checkbox @click.native.stop v-model="allSelected">
    </b-form-checkbox>
  </template>

  //Not working. data.item.selected is always the top row in all of the results, not it's current position
  <template slot="selected" slot-scope="data">
    <b-form-checkbox id="checkbox" @click.stop v-model="data.item.selected">
    </b-form-checkbox>
  </template>

</b-table>

답변:

문제는 b-form-displays의 ID입니다.id="displays"는 같은 체크박스에 바인딩되어 있습니다.일단 :id='filename'+data로 변경했습니다.index"는 효과가 있었다!

언급URL : https://stackoverflow.com/questions/52883287/bootstrap-vue-issues-with-checkboxes-in-b-table