Вопрос:

Есть ли лучший способ зафиксировать ошибки из компонентов Vuetify?

vue.js vue-component vuetify.js

1276 просмотра

1 ответ

361 Репутация автора

Я использую библиотеку Vue.js Vuetify, чтобы добавить несколько компонентов текстового поля внутри компонента, который я создаю. Чтобы обеспечить проверку ввода, я хотел бы захватить hasErrorсвойство компонентов текстового поля. Я знаю путь собственности: this.$children[3]._computedWatchers.hasError.active. Но я хотел бы знать, есть ли другой способ доступа к этим свойствам. Может я что-то упустил?

 <template>
  <div class="register">
    <form>
      <div>
        <v-text-field name="new-user-email"
                      label="Email"
                      type="email"
                      single-line
                      required></v-text-field>
      </div>
      <div>
        <v-text-field name="user-user-password"
                      label="Password"
                      type="password"
                      single-line
                      required>
        </v-text-field>
      </div>
      <div>
        <v-text-field name="new-user-password-confirmation"
                      label="Confirm Password"
                      type="password"
                      single-line
                      required>
        </v-text-field>
      </div>
      <div @click="registerNewUser">
        <v-btn>Register</v-btn>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  name: 'register-new-user',
  data() {
    return {
      checked: false
    };
  },
  methods: {
    registerNewUser() {
      console.log(this.$children[3]._computedWatchers.hasError.active)
      console.log('Register a new user')
    }
  }
};
</script>
Автор: James Источник Размещён: 07.04.2017 04:55

Ответы (1)


2 плюса

29328 Репутация автора

Решение

Добавьте refатрибут к v-text-fieldкомпоненту следующим образом:

<v-text-field 
  ref="password-confirmation"
  name="new-user-password-confirmation"
  label="Confirm Password"
  type="password"
  single-line
  required
></v-text-field>

Затем вы можете ссылаться на VueComponentэкземпляр компонента текстового поля Vuetify (вместе с его свойствами и методами) следующим образом:

methods: {
  registerNewUser() {
    console.log(this.$refs['password-confirmation'].hasError)
  }
}

Вот документация по ссылкам.

Автор: thanksd Размещён: 07.04.2017 05:00
Вопросы из категории :
32x32