html js怎样实现在第一个字段中输入值,第二个字段的值自动改变,javascript - vue.js从后台取出的字段列表是循环出来的每个下面对应一个输入框，怎么样才能在变更其中一个值的时候不会影...

现在显示效果是这样的

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

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

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")

}

})

})