验证对象中的文本字段

Question

我有一个对象数组，例如 who 显示 2 个字段 time 和 record ：sprint:[{time: void 0, record: void 0}]<div v-for="(s, index) in sprint" :key="index">    <v-text-field        class="input"        v-model="sprint.time"    ></v-text-field>    <v-text-field        v-model="sprint.record"    ></v-text-field> </div>当我点击添加按钮时，我有一个功能在之后添加这些字段：            addSprint() {                this.sprint.push({                  time: '',                  record: ''              });            },我想使用 Vuelidate 检查其中的每一个是否存在。验证必须是必填字段，数字，时间：介于 0 和 1（浮点数 0.1，0.2，..）之间，记录：介于 0 和 100 之间，

Answer 1

这里添加了对两个字段的验证：https : //codepen.io/chansv/pen/eYYWGLe?editors=1010

<div id="app">

  <v-app id="inspire">

    <v-form>

      <v-container>

        <div v-for="(s, index) in sprint" :key="index">

          Index: {{index}}

            <v-text-field

                class="input"

                label="time"

                :rules="[rules.required, rules.time]"

                v-model="s.time"

            ></v-text-field>

            <v-text-field

                label="record"

                :rules="[rules.required, rules.record]"

                v-model="s.record"

            ></v-text-field> 

        </div>

        <v-btn @click="addSprint">Add Sprint</v-btn>

      </v-container>

    </v-form>

  </v-app>

</div>

new Vue({

  el: '#app',

  vuetify: new Vuetify(),

  data: {

    sprint: [],

    rules: {

      required: v => !!v || 'this field is required',

      time: v => (v >= 0 && v <= parseFloat(1)) || "enter value less than 1 or greater than 0",

      record: v =>  (v >= 0 && v <= 100) || "enter value less than 100 or greater than 0",

    }

  },

  methods: {

    addSprint() {

                this.sprint.push({

                  time: '',

                  record: ''

              });

            },

  },

})

Answer 2

这里添加了对两个字段的验证：https : //codepen.io/chansv/pen/eYYWGLe?editors=1010

<div id="app">

  <v-app id="inspire">

    <v-form>

      <v-container>

        <div v-for="(s, index) in sprint" :key="index">

          Index: {{index}}

            <v-text-field

                class="input"

                label="time"

                :rules="[rules.required, rules.time]"

                v-model="s.time"

            ></v-text-field>

            <v-text-field

                label="record"

                :rules="[rules.required, rules.record]"

                v-model="s.record"

            ></v-text-field> 

        </div>

        <v-btn @click="addSprint">Add Sprint</v-btn>

      </v-container>

    </v-form>

  </v-app>

</div>

new Vue({

  el: '#app',

  vuetify: new Vuetify(),

  data: {

    sprint: [],

    rules: {

      required: v => !!v || 'this field is required',

      time: v => (v >= 0 && v <= parseFloat(1)) || "enter value less than 1 or greater than 0",

      record: v =>  (v >= 0 && v <= 100) || "enter value less than 100 or greater than 0",

    }

  },

  methods: {

    addSprint() {

                this.sprint.push({

                  time: '',

                  record: ''

              });

            },

  },

})