iT邦幫忙

0

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

<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 }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

0
EN
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/>
0
leeihsing0127
iT邦新手 5 級 ‧ 2021-01-12 11:02:53

我的做法不一樣

  1. 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} ]
  2. 將plant資料渲染到html上
  3. checkbox作切換時,在methods或是computed寫一個func,去作boolean變數(flag)的轉換
  4. 送出時,針對plant跑each,撈出boolean是true的資料,這樣的話,像是pic, star, hp的資料也比較容易抓得到,而不用理會html上的資料~

我要發表回答

立即登入回答