Как использовать свойства компонента в vue.js при изменении входного текста? - PullRequest
Новая
       4

Как использовать свойства компонента в vue.js при изменении входного текста?

0 голосов
/ 09 марта 2019

Я использую Vuesax Framework Components, который работает нормально, но у меня в процессе обучения для обоих laravel/vue.js и возникла проблема с тем, как использовать свойства компонента при изменении входного текста?

Учтите это: 

<vs-input
         style="width:100%"
         label="Label"
         danger-text="character"
         v-model="form.invoice_title"
         name="invoice_title"/>

в верхнем компоненте кода покажет мне входной текст красного цвета с текстом, который скажет, что использовать неправильно, но в правильной идее я должен сделать так, чтобы красный цвет показывал, когда что-то не так свходные данные, такие как `input должны содержать более 3 символов '. Компонент ввода в vuesax

Итак, вот что я хочу сделать, чтобы мой вход активировал / активировал :danger & danger-text свойства, когда что-то не так. Например:

входных данных должно быть больше 6и менее 80 символов.

1 Ответ

1 голос
/ 09 марта 2019

Это можно сделать с помощью вычисляемого свойства.Например: 

<vs-input
     style="width:100%"
     label="Label"
     :danger="hasError"
     :danger-text="errorText"
     v-model="form.invoice_title"
     name="invoice_title"/>

... // in javascript

computed() {
    hasError() {
        return this.form.invoice_title.length < 6 || this.form.invoice_title.length > 80
    }
    errorText() {
        if (this.form.invoice_title.length < 6) {
            return 'Invoice title should be at least 6 characters'
        }
        if (this.form.invoice_title.length > 80) {
            return 'Invoice title should be at most 80 characters'
        }
        return ''
    }
}

Я настоятельно рекомендую vuelidate lib форму управления проверкой

...