JenesiusVueFormРабота со значениями
На данной странице представлены все методы и свойства, которые вам пригодятся для работы с состоянием формы.
Установка значения
Основной задачей форм является поддержания текущего состояния(значения). Для изменения его используется метод setValues:
form.setValues({
name: "Jack",
age: 24
})
form.values // { name: "Jack", age: 24 }form.setValues({
name: "Jack",
age: 24
})
form.values // { name: "Jack", age: 24 }Параметры
values Обязательный
Значения, когда будут установлены для формы.
options Необязательный
Необязательный параметр, объект со следующими свойствами:
_
changed Необязательный
Boolean значение, являются ли данные значения изменениями. Если true, то значения будут проецироваться на changes.
target Необязательный
Имя целевого объекта для которого был вызван setValues. На данное свойство можно смотреть так, будто метод был вызван из дочернего элемента, имя которого было передано в target.
clean Необязательный
Нужно ли полностью перезаписывать предыдущее значение. По умолчанию setValues примешивает значение, но если установлен clean: true, предыдущее значение будет полностью перезаписано новым.
Примеры использования
Установка значения
form.setValues({
username: "Jack"
})
form.values // { username: "Jack" }form.setValues({
username: "Jack"
})
form.values // { username: "Jack" }Установка значения с параметром target
form.setValues({
city: "Emerald City"
}, { target: "address" })
form.values // { address: { city: "Emerald City" } }form.setValues({
city: "Emerald City"
}, { target: "address" })
form.values // { address: { city: "Emerald City" } }Использование clean параметра
// Values: { username: "Jenesius", age: 24 }
form.setValues({ username: "Jenesius", age: 24 })
form.setValues({
name: "Jask"
}, { clean: true })
form.values // { name: "Jack" }// Values: { username: "Jenesius", age: 24 }
form.setValues({ username: "Jenesius", age: 24 })
form.setValues({
name: "Jask"
}, { clean: true })
form.values // { name: "Jack" }Использования target и clean вместе
form.setValues({
name: "Jack",
address: {
city: "Emerald City"
}
})
form.setValues({
code: "00"
}, { target: "address", clean: true })
form.values // { name: "Jack", address: { code: "00" } }form.setValues({
name: "Jack",
address: {
city: "Emerald City"
}
})
form.setValues({
code: "00"
}, { target: "address", clean: true })
form.values // { name: "Jack", address: { code: "00" } }Примешивание значения
form.setValues({
address: {
city: "Emerald City"
}
})
// { address: { city: "Emerald City" } }
form.setValues({
address: {
code: "00"
}
})
form.values // { address: { city: "Emerald City", code: "00" } }form.setValues({
address: {
city: "Emerald City"
}
})
// { address: { city: "Emerald City" } }
form.setValues({
address: {
code: "00"
}
})
form.values // { address: { city: "Emerald City", code: "00" } }Изменение значений
Как уже понятно из setValues, если мы передаем change: true, то происходит работа именно с changes состоянием формы. Для удобной работы был создан alias change, которые автоматически устанавливает параметр changed.
form.change(data) // form.setValues(data, { changed: true })form.change(data) // form.setValues(data, { changed: true })Отмена изменений
Чтобы отменить изменения(работа с changes) используется метод revert:
form.setValues({username: "Jenesius", age: 24});
form.change({age: 23, father: true});
// Values: { username: "Jenesius", age: 23, father: true }
form.revert();
// Values: { username: "Jenesius", age: 24}form.setValues({username: "Jenesius", age: 24});
form.change({age: 23, father: true});
// Values: { username: "Jenesius", age: 23, father: true }
form.revert();
// Values: { username: "Jenesius", age: 24}Очистка значений
Чтобы полностью очистить форму используется метод cleanValues:
form.setValues({name: "Jack"})
form.cleanValues(); // Values: {}form.setValues({name: "Jack"})
form.cleanValues(); // Values: {}Данный метод также принимает значения, которые будут установлены вместо текущего:
form.setValues({name: "Jack"})
form.cleanValues({age: 24}); // Values: { age: 24 }form.setValues({name: "Jack"})
form.cleanValues({age: 24}); // Values: { age: 24 }Значения формы (Values)
Из предыдущих примеров видно, что конечное значение формы находится в form.values:
form.setValues({age: 24});
form.values // { age: 24 }form.setValues({age: 24});
form.values // { age: 24 }Изменения формы (Changes)
Чтобы получить только изменения, необходимо воспользоваться form.changes:
form.setValues({ name: "Jack" })
form.change({ age: 24 })
form.values; // { name: "Jack", name: 24 }
form.changes; // { age: 24 }form.setValues({ name: "Jack" })
form.change({ age: 24 })
form.values; // { name: "Jack", name: 24 }
form.changes; // { age: 24 }Получение значения по имени
В некоторых ситуациях есть надобность получения значения поля по имени. Для такого случая необходимо использовать именно метод getValueByName.
Параметры
name Необязательный
Строковое название поля, для которого необходимо получить значение.
form.setValues({ login: "Jack" });
form.getValueByName('login') // Jackform.setValues({ login: "Jack" });
form.getValueByName('login') // JackWARNING
Получение значения по имени свойства является ошибочным:
form.values['login'] // Wrong
form.getValueByName('login') // Correctform.values['login'] // Wrong
form.getValueByName('login') // CorrectЕсли мы говорим про простые поля - это будет работать, однако в случае с составными полями (address.country) данный способ не сможет найти нужное значение поля.
Подтверждение изменений
Для того чтобы подтвердить все изменения или только для конкретного поля, воспользуйтесь методом acceptChanges. Метод очищает changes (целиком или единичное поле) и устанавливает очищенное значение в values.
Параметра
name Необязательное
Если не передано - все изменения будет сперва проецированы на values, а затем очищены. Если значение передаётся оно должно быть строковым названием поля.
Пример
const form = new Form();
form.change({ username: "Jack", age: 24, id: 1 })
form.acceptChanges('username');
form.pureValues; // { username: "Jack" }
form.changes ; // { age: 24, id: 1 }
form.acceptChanges();
form.pureValues; // { username: "Jack", age: 24, id: 1 }
form.changes; // {}const form = new Form();
form.change({ username: "Jack", age: 24, id: 1 })
form.acceptChanges('username');
form.pureValues; // { username: "Jack" }
form.changes ; // { age: 24, id: 1 }
form.acceptChanges();
form.pureValues; // { username: "Jack", age: 24, id: 1 }
form.changes; // {}События
Использование данного метода не порождает события изменения. Это важно учитывать при его использовании.
Очистка изменений для поля
Метод cleanChangesByField отменяет изменения для переданного поля. Данная функция работает только с объектом changes и не затрагивает объект values. Если в дочернее свойство объекта changes является объектом, но при этом количество дочерних ключей равно 0, данной свойство полностью удаляется из объекта changes.
form.setValues({age: 24})
form.change({name: "Jack", age: 25}); // { name: "Jack", age: 25 }
form.cleanChangesByField('name');
// Changes: { age: 25 }
// Values: { age: 25 }form.setValues({age: 24})
form.change({name: "Jack", age: 25}); // { name: "Jack", age: 25 }
form.cleanChangesByField('name');
// Changes: { age: 25 }
// Values: { age: 25 }Проверка поля на изменение
Метод checkFieldChange проверяет изменения для переданного названия поля. В случае, если поле было изменено вернёт true, false в противном случае.
form.change({name: "Jack"});
form.checkFieldChange('name') // true
form.checkFieldChange('age') // falseform.change({name: "Jack"});
form.checkFieldChange('name') // true
form.checkFieldChange('age') // falseСтатус формы (Changed)
Чтобы понять, что форма находится в изменённом состоянии необходимо получить значение свойства changed;
form.changed // false
form.change({ name: "Jack" })
form.changed // true
form.revert();
form.changed // falseform.changed // false
form.change({ name: "Jack" })
form.changed // true
form.revert();
form.changed // false