javascript - 验证动态列表 Vue 中更改的输入

Question

基于值在 1-10 范围内的下拉列表，我正在显示 N 行（N = 下拉列表的值）

每行都充当一个对象，因为它具有 3 个属性：x、y、z。我生成的所有行都存储在一个数组中，因此数据的最终格式是：

data:{
    rows: [
        {x:0,y:0,z:value},
        .......
        ]
    }

我必须验证每一行的 x,y,z 的值是否不超过 100，并且是否显示错误。

我试过用一个函数来解析每次输入变化时的数组，但除了它看起来效率很低之外，它有时不起作用。

如何处理动态生成的输入的验证？

先感谢您！

标签： javascriptvue.js

Answer 1

创建一个观察数组变化的观察者：

data:{
    rows: [
        {x:0,y:0,z:value},
        .......
        ]
    },
watch:{
  rows:{
        handler(val){
         let check=this.rows.every(row=>Object.values(row).every(v=>v<100))
          if(!check){
             //error
          }
       },
     deep:true
  }
}