v-for迴圈動態產生，表格內input:checkbox，依照v-for索引控制表格內屬性

vue.js

postintw 2021-01-09 15:03:41 ‧ 1277 瀏覽

分享至

<table  class="table table-striped table-bordered table-responsive game role " width="50%">
                    <tr><th><input type="checkbox" name="" onclick="check_all(this,'ga')"></th>
                        <th class="text-nowrap">角色名稱</th><th>圖片檔名</th><th>角色價錢</th><th>生命總值</th><th>初始生命</th><th>攻擊速度</th><th>攻擊</th><th>防禦</th><th>編輯</th>
                    </tr>
                    <tr v-for="(r,i) in plant">
                        <td><input type="checkbox" name="ga" id="" ></td>
                        <td >{{r.role}}</td>
                        <td><input type="text" :value="r.pic"min="0" name=""></td>
                        <td><input type="text" :value="r.star"min="0" name=""></td>
                        <td><input type="number" :value="r.hp"min="0" name=""></td>
                        <td><input type="number" :value="r.hps"min="0" name=""></td>
                        <td><input type="number" :value="r.speed"min="0" name=""></td>
                        <td><input type="number" :value="r.damage"min="0" name=""></td>
                        <td><input type="number" :value="r.defense"min="0" name="" id=""></td>
                        <td><button type="button" class="btn btn-info">編輯</button></td>
                    </tr>
                </table>

我要用v-for動態產生一張表格，然後input:checkbox要控制那一列的name=""屬性，也就是打勾的那一列才要送出，不打勾的那一列不要送出

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

iT邦好手 1 級 ‧ 2021-01-11 09:04:16

由於你提供的資料太少(沒有 data 、 Vue instance )，所以我只能給一些粗淺的想法:
1.對 name 做單向綁定
2.新增事件監聽以及處理器

    <td><input @change="changeHandler(i)" type="checkbox" name="ga" id="" ></td>
    <script>
    //Your declared vue instance
    changeHandler(i) = {
    this.plant[i].name = '';
    return 0;
    }
    return 0;
    })
    }
    //...
    <script/>

回應
分享
檢舉

登入發表回應

leeihsing0127

iT邦新手 5 級 ‧ 2021-01-12 11:02:53

我的做法不一樣

plant的資料，我會在created或mounted產生，然後每一筆數據多一個boolean變數(預設false)，存放在data內，plant資料類似
[ {"pic":"1.jpg", "star":100, "hp":500, ..., "flag":false}, {"pic":"2.jpg", "star":200, "hp":200, ..., "flag":false}, {"pic":"3.jpg", "star":50, "hp":300, ..., "flag":false} ]
將plant資料渲染到html上
checkbox作切換時，在methods或是computed寫一個func，去作boolean變數(flag)的轉換
送出時，針對plant跑each，撈出boolean是true的資料，這樣的話，像是pic, star, hp的資料也比較容易抓得到，而不用理會html上的資料~