Vue中form表单校验rules的问题（对象数组过滤新对象数组 ，对象校验，数组校验，）

js遍历对象数组 通过过滤将字段值=0的过滤到新的对象数组中

form.value.leftPinCameraConfigList=response.data.filter(item=> item.pinType==0);

对象数组：每个元素都是一个对象，每个对象有自己的属性和值，可以通过对象的属性名来访问对象的值 集合数组：每个元素是一个简单的值，没有属性名，只有值。可以通过索引号来访问集合数组的值

let objArr = [
  { name: 'Tom', age: 20 },
  { name: 'John', age: 25 },
  { name: 'Mary', age: 30 }
];
`et setArr = [1, 2, 3, 4, 5];``


  
{{ item.name }}
  
{{ item.age }}



  
{{ item }}

表单对象和单个字段校验

数组校验

  
    {{form.cameraNamesList[index].cname}}：
  
  
    <!--  -->
    
      
    
  
  
    
      
    
  
  
    
      
    
  
  
    
      
    
  
  
    
      
    
  
  
    
      
    
  
  
    
      
    
  
  
    
      
    
  


      

定义

const data = reactive({
        form: {
          radioLeft:1,
          name: null,
          productNameId: null，
          vehicleObject: reactive({
            id: null,
            productNameId: null,
            vehicleInitialPositionX:null,
            vehicleInitialPositionY:null,
            vehicleClampPositionX:null,
            vehicleClampPositionY:null,
            clampMoment:null,
            vehicleInitialPositionSpeed:null,
            vehicleClampPositionSpeed:null,
          }),
          cameraParameterList: [
            { productNameId: null,
              initialPosition: null,
              initialPositionSpeed: null,
              startShootingPosition: null,
              startShootingPositionSpeed: null,
              endShootingPosition: null,
              endShootingPositionSpeed: null,
              focusPosition: null,
              focusPositionSpeed: null,   
            },
            {
              productNameId: null,
              initialPosition: null,
              initialPositionSpeed: null,
              startShootingPosition: null,
              startShootingPositionSpeed: null,
              endShootingPosition: null,
              endShootingPositionSpeed: null,
              focusPosition: null,
              focusPositionSpeed: null,   
            },
            {
              productNameId: null,
              initialPosition: null,
              initialPositionSpeed: null,
              startShootingPosition: null,
              startShootingPositionSpeed: null,
              endShootingPosition: null,
              endShootingPositionSpeed: null,
              focusPosition: null,
              focusPositionSpeed: null,   
            },
            {
              productNameId: null,
              initialPosition: null,
              initialPositionSpeed: null,
              startShootingPosition: null,
              startShootingPositionSpeed: null,
              endShootingPosition: null,
              endShootingPositionSpeed: null,
              focusPosition: null,
              focusPositionSpeed: null,   
            },
            //第五个相机参数
            {
              productNameId: null,
              initialPosition: null,
              initialPositionSpeed: null,
              startShootingPosition: null,
              startShootingPositionSpeed: null,
              endShootingPosition: null,
              endShootingPositionSpeed: null,
              focusPosition: null,
              focusPositionSpeed: null,   
            },
          ],

move

const data = reactive({

form: {

radioLeft: 1,
name: null,
productNameId: null,
lightObject1: reactive({
  id: null,
  productNameId: null,
  cameraType: "",
  cameraIp: "",
  shootingNumber: "",
  exposureTime: "",
  gain: "",
  length: "",
  width: "",
  picturePath: "",
  continuousShootingNumber: "",
  triggerTime: "",
}),
//相机参数集合
lightCamera: reactive([]),}

js

//往数组中添加这八个相机配置参数

for(var i=0;i<8;i++){

const clonedLightObject1 = { …data.form.lightObject1 };

clonedLightObject1.productNameId=pid

clonedLightObject1.cameraType=i

clonedLightObject1.shootingNumber=1

  data.form.lightCamera.push(clonedLightObject1);
}

页面

   
  
    
    
      {{formatStatus(form.lightCamera[index].cameraType) }}
    
    
      <!--  -->
      
        
      
    
    
  
  
    
      
      提交
      取 消