鍍金池/ 問答/HTML/ vue動(dòng)態(tài)添加空白input元素，數(shù)據(jù)綁定和刪除

vue動(dòng)態(tài)添加空白input元素，數(shù)據(jù)綁定和刪除

圖片描述

最少填一行，html里第一行是固定的，之后的行是包裹在一個(gè)v-for循環(huán)里的，點(diǎn)添加的時(shí)候，往要循環(huán)的數(shù)組stepNum里加內(nèi)容，刪除的時(shí)候傳入循環(huán)時(shí)的索引index。但現(xiàn)在不知道如何綁定v-model，而且當(dāng)點(diǎn)擊箭頭處刪除時(shí)，無法刪除當(dāng)前行，該處input里的數(shù)據(jù)還在。
methods:{

        add:function () {
            this.stepNum.push('');
        },
        del:function (index) {
            this.stepNum.splice(index,1)
        }
    }
回答
編輯回答
帥到炸

v-model綁定到v-for循環(huán)的項(xiàng)上：

<template>
    <ul>
        <li v-for="(item, index) in formData" :key="index">
            <input ... v-model="item.num" />人
            <input ... v-model="item.money" />元
            ...
            <span @click="add">+<span>
            <span @click="del(index)">-<span>
        </li>
    </ul>
</template>
...
data() =>({
    formData: [{ num: '', money: ''}]
}),

methods: {
    add() {
        this.formData.push({ num: '', money: ''})
    },
    del(index) {
        this.formData.splice(index, 1)
    }
}
2017年4月4日 19:46
編輯回答
心上人

一樓給出了動(dòng)態(tài)條目增減的樣例，主要是data中維護(hù)一個(gè)數(shù)據(jù)的源數(shù)組用于循環(huán)渲染。但是在綁定key為列表中的index話，刪除時(shí)組件銷毀可能會(huì)出現(xiàn)問題。這源于Vue內(nèi)部的組件銷毀機(jī)制，因此key盡量綁定為一個(gè)uniqueId。

2018年7月20日 11:47
編輯回答
練命

建一個(gè)空數(shù)組 arr:[],
然后綁定 v-model="arr[index]"

2017年9月13日 16:26
編輯回答
別硬撐
<tr v-for="(data,index) in datas" :key="index">
    <td><input v-model="datas[index].userNumber"></td>
    <td><span @click="del(index)">刪除</span></td>
</tr>

data(){
    return {
        datas:[{name:1234,userNumber:1,id:1},{name:4567,userNumber:2}],
    }
},
methods:{
    del(index){
        this.datas[index].userNumber = 0;
    }
}

如果原始data里面沒有userNumber這個(gè)字段，那就手動(dòng)給每一個(gè)加上吧。（我一般會(huì)叫后端改接口，返回個(gè)默認(rèn)值

2017年6月12日 05:26