Читаю что массивы сами по себе реактивны.
Создал массив из ошибок заранее (на всякий случай) в методе Oninput
буду переключаю элемент массива в true либо false, в зависимости от того прошло поле проверку или нет.
Массив обновляется, но кажется он не реактивен, так как computed свойство progress
не срабатывает повторно. Как можно исправить?
И второй вопрос, как я могу запустить валидацию еще при загрузке страницы если метод validateInput
срабатывает только при вводе и при потере фокуса. Понимаю что по идее надо запустить этот метод еще и при загрузке но при условии что input уже чем то заполнен, чтобы не пугать пользователя ошибками сразу
Имя можно вводить только английскими буквами
Телефон только цифры больше 6 знаков
Если все верно то поле подсвечивается зеленым, а элементы массива success_array
, должны переключаться в true
либо false
Vue.component('app-input', {
props: ['value', 'pattern', 'name'],
template: `
<div class="form-group" :class="getStatus">
<label>{{ this.name }}</label>
<input type="text" class="form-control" :value="value" @input="validateInput" @blur="validateInput">
</div>
`,
data: () => ({
is_valid: null,
}),
computed: {
getStatus() {
return {
'success': this.is_valid,
'error': this.is_valid === false,
};
},
},
methods: {
validateInput(e) {
this.is_valid = this.pattern.test(e.target.value);
this.$emit('input', {
value: e.target.value,
valid: this.is_valid,
});
},
},
});
new Vue({
el: '.sample',
data: () => ({
info: [{
name: 'Name',
value: '444444',
pattern: /^[a-zA-Z ]{2,30}$/,
},
{
name: 'Phone',
value: '',
pattern: /^[0-9]{7,14}$/,
},
{
name: 'Email',
value: '',
pattern: /.+/,
},
{
name: 'Some Field 1',
value: '',
pattern: /.+/,
},
{
name: 'Some Field 2',
value: '',
pattern: /.+/,
},
],
success_array: [],
}),
computed: {
progress() {
let success_length = 0;
this.success_array.forEach(el => {
console.log(el);
if (el) {
success_length++
}
})
return {
width: success_length / this.info.length * 100 + '%',
};
},
},
methods: {
onInput(index, data) {
this.info[index].value = data.value;
this.success_array[index] = data.valid;
},
},
beforeMount() {
this.info.forEach((el, i) => {
this.success_array.push(false);
});
},
});
.error {
color: red;
}
.success {
color: #3c763d;
}
.progress {
height: 20px;
margin-bottom: 20px;
overflow: hidden;
background-color: #f5f5f5;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 2px rgb(0 0 0 / 10%);
box-shadow: inset 0 1px 2px rgb(0 0 0 / 10%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<div class="wrapper">
<div class="sample">
<form>
<div class="progress">
<div class="progress-bar" :style="progress"></div>
</div>
<div>
<app-input v-for="(form_item, index) in info" :key="index" :value="form_item.value" :pattern="form_item.pattern" :name="form_item.name" @input="onInput(index, $event)"></app-input>
</div>
<button class="btn btn-primary">
Send Data
</button>
</form>
<div>
<table class="table table-bordered">
<tr>
<td></td>
<td></td>
</tr>
</table>
</div>
</div>
</div>