부트스트랩 Vue(테이블의 바인딩된 항목 데이터를 기반으로 한 확인란 입력)

부트스트랩 Vue(테이블의 바인딩된 항목 데이터를 기반으로 한 확인란 입력)

제 테이블에는 데이터가 가득 찬 테이블이 있습니다.나는 가지고 있다selectedb-table의 체크박스에 바인드할 데이터의 속성.어떻게 해야 할지 모르겠어요.

마이 데이터:

data: () => ({
  tableData: [
    {
      title: "title01",
      desc: "desc01",
      selected: false
    },
    {
      title: "title02",
      desc: "desc02",
      selected: false
    },
  ],
  tableColumns: [
    { key: "selected", label: "", sortable: false }
    { key: "title", label: "Title", sortable: false },
    { key: "desc", label: "Description", sortable: false }
})

html:

<b-table id="myTabel"
  hover
  striped
  :items="tableData"
  :fields="tableColumns">
  <template slot="selected" slot-scope="row">
    <b-form-group>
      <input type="checkbox" v-model="How_To_Bind_To_Object_Prop?">
    </b-form-group>
  </template>
</b-table>

아무리 생각해도 나는 그것을 얻을 수 없다.v-model테이블 데이터에 실제로 바인드하도록 설정합니다. v-model="tableData.selected"모든 데이터 개체에 모든 확인란을 바인딩합니다.따라서 하나를 선택하면 모두 확인되고 그 반대도 마찬가지입니다.그 행의 데이터에만 바인드하는 방법을 알 수 없습니다.

보다 전통적인 HTML과 Vue를 사용하여 이 작업을 수행할 수 있습니다.v-for루프로 통과하다tableData각 테이블 행을 바인드합니다.단, 전부는 아니더라도 대부분의 폼을 bootstrap-vue로 이동하려고 합니다.

이 기능은 훌륭하게 동작합니다.

<table>
    <thead>
        <tr>
            <th :key="key" v-for="(tableColumn, key) in tableColumns">
                {{ tableColumn.label }}
            </th>
        </tr>
    </thead>
    <tbody>
        <tr :key="key" v-for="(tableRow, key) in tableData">
            <td>
                <input type="checkbox" 
                    v-model="tableRow.selected">
            </td>
            <td>
                {{ tableRow.title }}
            </td>
            <td>
                {{ tableRow.desc }}
            </td>
        </tr>
    </tbody>
</table>

다음과 같이 스코프 슬롯 내에서 행 항목에 액세스하여 네스트된 체크박스를selected속성:

<template v-slot:cell(selected)="row">
   <b-form-group>
       <input type="checkbox" v-model="row.item.selected" />
   </b-form-group>
</template>

자세한 내용은 표 - 사용자 정의 렌더링 설명서를 참조하십시오.

언급URL : https://stackoverflow.com/questions/54695753/bootstrap-vue-b-table-with-an-checkbox-input-based-on-the-bound-item-data-for