Проверить текстовое поле в объекте - PullRequest
Новая
       30

Проверить текстовое поле в объекте

1 голос
/ 24 октября 2019

У меня есть массив объектов, например, которые отображают 2 поля времени и записи: 

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,

спасибо за вашу помощь

1 Ответ

1 голос
/ 24 октября 2019

Здесь добавлена ​​проверка для обоих полей: 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: ''
              });
            },
  },
})
...