element-ui中动态表单组件的数据绑定注意点

          

......
                    
                      
                        第{{index+1}}件商品
                        
                        %价格
                      
                    
......
          
......
      volumeDiscountInfo: {
          discounts: [{
              reduction: ''
          }]
      }

动态生成表单时,要注意v-for中循环的对象数组要来自于el-form中的v-model;

el-form-item上的:prop、el-form-item内的v-model和data中的字段必须一致,因为prop是使用rules里的规则对v-model进行校验,如果三者不一致会导致校验结果错误

范例中:prop的写法是:prop="'discounts.'+index+'.reduction'",其中的discounts来自v-for="(discount, index) in volumeDiscountInfo.discounts";注意我们只取最后的discounts。如果写volumeDiscountInfo.discounts的话,查询路径会变成volumeDiscountInfo.volumeDiscountInfo.discounts,显然与需求不一致

你可能感兴趣的:(前端)