要求:
页面上动态生成文本框,与后台的数组进行绑定。要求在页面输入数值后,更新到后台的数组中。
实现步骤:
设置文本框的绑定onchange事件,与后台方法进行绑定,在改方法中,使用:
this.$set(this.sensorType1, index, '');
这样做的确可以实现页面控件与后台数据的绑定,但是有个问题,页面会刷新,导致页面一些简单绑定(数值通过其他页面传入,本实例中页面控件用cavityNums1字段)控件复位。
于是,在上面的基础上, 进而采用watch方法,阻止控件重新从props中获取数据:
watch: { isCavityModalShow: function () { this.cavityNums1 = this.cavityNums; } },
这样有2个作用:
1.子页面打开时,触发watch,将值传递到cavityNums1,用于后续操作。
2.子页面调用$set相关方法时,刷新自身,由于不触发watch,因此简单绑定的原值得以保留,不会重新复原。
问题得以解决。估计还有其他方法,暂记。