javascript - 如何使用vuejs在每一行显示复选框

Question

如何使用vuejs在每一行中显示复选框，我需要将这些选中的项目传递给函数以进行进一步处理。 我尝试过但无法正常工作。我在下面给出了带有 api 数据输出的代码。

我需要将选定的 id 传递给 on()。

        <va-card style="margin-top:20px">
         <table  style="width:100%;border:2px">
                <thead>
                  <tr>
                    <th>Pole ID</th>
                    <th>Address</th>
                   <th>     
                    <label class="form-checkbox">
                      <input type="checkbox" v-model="selectPole"  >
                      <i class="form-icon"></i>
                    </label>
                  </th>
                  </tr>
                </thead>
                <tbody>
                <tr v-for="pole in streetInfo">
                  <td style="font-weight:bold">{{pole.pole}}</td>
                 <td>{{pole.address}}</td>
                  <td>       
                   <label class="form-checkbox">
                  <input type="checkbox" :value="pole.pole" v-model="selectedStreetLight">
                <i class="form-icon"></i>
                </label>
              </td>
             </tr>
           <va-button  @click="On()" class="my-0">ON</va-button>
            <va-button   @click="Off()" class="my-0">OFF</va-button>
            </tbody>
           </table>
          </va-table>
       </va-card>

//api数据输出

        [
          {
            "address": "Jayanagar 4th Block Banglore", 
            "pole": "BNG-JAY-137-003",
            "select":false
          }, 
          {
            "address": "Jayanagar 5th Block Banglore", 
            "pole": "BNG-JAY-137-004",
            "select":false
          }, 
          {
            "address": "Jayanagar 6th Block Banglore", 
            "pole": "BNG-JAY-137-005",
            "select":false
          }
        ]

Answer 1

        <tr v-for="(index,pole) in streetInfo">
          <td style="font-weight:bold">{{pole.pole}}</td>
         <td>{{pole.address}}</td>
          <td>       
           <label class="form-checkbox">
          <input @change="change(index)" type="checkbox" :value="pole.pole" v-model="selectedStreetLight">
        <i class="form-icon"></i>
        </label>
      </td>

这里我改变了streetInfo中的(index,pole)和@change="change(index)

并进行更改(索引)方法并放置您想要的内容。

change(index)
{
    this.streetInfo[index].select=!this.streetInfo[index].select;
}

我相信这会有所帮助