javascript - vue.js从后台取出的字段列表是循环出来的每个下面对应一个输入框，怎么样才能在变更其中一个值的时候不会影响到其他字段的值呢？

Question

现在显示效果是这样的

但是点击其中一个选项的时候其他条目都会受到影响

我想实现每个下拉框和输入框都可以独立提交值不会互相影响该怎么做呢下面是相关代码

var device = new Device()
    var Promise = require("Promise")
    var Dialog = require("Dialog")
    return Vue.extend({    
        template : utils.template(function(){/*
            <p class="content">
                <ul class="table-view table-view-todoList table-view-select">
                        <li class="table-view-cell" v-for="bill in list" v-if="bill.DATATYPE==='SELECT'" >
                            <dl>
                                <dt>{{bill.COLNAME}}</dt>
                                <dd>
                                    <input type="text" readOnly="true" v-model="testResult" @click="result"/>
                                </dd>
                            </dl>
                            <input type="text" v-if="testResult==='异常'" placeholder="请描述异常信息"/>
                        </li>
                        <li class="table-view-cell" v-for="bill in list" v-if="bill.DATATYPE==='TEXT'" style="padding:10px 10px 0;">
                            <h5>{{bill.COLNAME}}</h5>
                            <input type="text"/>
                        </li>
                        <button class="btn btn-primary btn-block" @click="submit" v-if="list.length && !pending">确定</button>
                </ul>
                <empty v-if="!list.length && !pending">不存在巡检回填项</empty>
                <pending v-if="pending"></pending>
            </p>
        */}),
        data : function(){
            return {
                pending : false,
                list : [],
                dispatchSn : this.$route.query.dispatchSn,
                itemId: this.$route.query.itemId,
                mainSn: this.$route.query.mainSn    
            }
        },
        compiled : function(){
            this.$dispatch("init",{
                title : "回填项",
                leftbar : [
                    {
                        "icon" : "icon icon-left-nav",
                        "method" : function(){
                            history.go(-1)
                        }.bind(this)
                    }
                ]
            })
            this.init()
        },
        methods : {
            init : function(){
                this.getPage(1)
            },
            submit : function(){
                // if(!this.testResult)return notify.warn("请选择巡检结果")
                var url="/mop/proxyIda/ida30/h5/app/AppPublicAction.do?method=call&business=IDB_EOMS_PLAN&callmethod=writeresutPlan&DISPATCHSN="+this.dispatchSn
                var form = {
                    ITEMID:this.itemId,
                    COLCODE:this.colcode,
                    COLNAME:this.colname,
                    CVALUE:this.cvalue
                }                
                console.log(form)
                this.pending = true
                utils.post(url,form)
                    .then(function(result){            
                        notify.success("录入成功！")                        
                        router.go({path:"/inspectBill/"})
                    }.bind(this))
                    .catch(function(error){
                        notify.error("录入失败！")
                        throw(error)
                    }.bind(this))
                    .finally(function(){
                        this.pending = false                        
                    }.bind(this))
            },
            result :function(){
                 return new Promise(function(resolve,reject){
                Dialog({
                    title : "请选择",
                    content : utils.template(function(){/*
                        <ul class="table-view table-view-todoList table-view-noright serviceLi">
                         <li class="table-view-cell" :value="list.name" :class="isCommont===list.value?'finish':'unfinish'" v-for="list in level">
                             <dl>
                                 <dt >{{list.name}}</dt>
                                 <dd @click="toggle(list.value)"></dd>
                             </dl>                    
                         </li>
                       </ul>
                    */}),
                    onload : function(body,dialog){
                        new Vue({
                            el : body[0],
                            data : {
                                isCommont: "01",
                                level :[{name:"异常",value:"2"},
                                    {name:"正常",value:"1"}]
                            },
                            methods :{
                                  toggle : function(i){
                                       this.isCommont = i
                                 }
                             }
                        })
                    },
                    onClose : function(){
                        resolve()
                    },
                    btn : {
                        name : "确定",
                        style : "btn-positive",
                        click : function(done,dialog,btn){
                            var selected = dialog.find(".finish").attr("value")
                            dialog.close(true)
                            resolve(selected)
                        }
                    }
                })
                }).then(function(selected){
                     this.testResult = selected
                }.bind(this))
            },            
            getPage : function(page){
                var url="/mop/proxyIda/ida30/h5/app/AppPublicAction.do?method=call&business=IDB_EOMS_PLAN&callmethod=queryPlanCol"
                this.pending = true
                var    params={
                    DISPATCHSN : this.dispatchSn,
                    ITEMID : this.itemId,
                    MAINSN : this.mainSn
                }
                utils.post(url, params).then(function(message) {
                    message.PLANLIST.forEach(function(bill){
                        bill.showMethod = false                            
                    }.bind(this))
                    this.list = this.list.concat(message.PLANLIST)
                }.bind(this))
                .catch(function(error) {
                    console.error(error)
                }.bind(this))
                .finally(function() {
                    this.pending = false
                }.bind(this))
            }
        },
        components : {
            empty : require("common/Empty"),
            pending : require("common/Pending")
        }
    })
})