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

现在显示效果是这样的

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

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

var device = new Device() var Promise = require("Promise") var Dialog = require("Dialog") return Vue.extend({ template : utils.template(function(){/*  
   {{bill.COLNAME}}
   
 
  
  {{bill.COLNAME}}
  
  
 不存在巡检回填项  
 */}), 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(){/*    {{list.name}}
 
 
 
 
 */}), 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") } }) })