Валидация props

Последнее обновление: 26.09.2017

С помощью props можно передавать извне данные в компонент. Однако не всегда данные, которые передаются приложению, являются крректными. Например, для возраста передать отрицательное числового значение или при вводе имени ввести пустую строку. Чтобы избежать подобных ситуаций, когда передаваемые данные не отвечают нашим ожиданиям и не являются корректными, применяется механизм валидации.

Прежде всего мы можем указать тип для свойств. В качестве типов можно использовать следующие: String, Number, Boolean, Function, Object, Array, Symbol.

Например, в прошлой теме параметр props определялся следующим образом:

props: ['name', 'age']

Но фактически это объект, который мы можем переписать иным образом:

Vue.component('user', {
  props: {name: String, age: Number},
  template: '<div><h2>User</h2><p>Name: {{name}}</p><p>Age: {{age}}</p></div>'
})

Здесь параметр props определен как объект. name и age в этом объекте выступают в качестве свойств, при этом для каждого свойства устанавливается тип.

Для более точной валидации свойства для него можно задать ряд параметров:

  • type: тип свойства

  • required: если этот параметр имеет значение true, то для данного свойства обязательно надо ввести значение

  • default: значение по умолчанию, которое устанавливается, если для свойства извне не передается никакого значения

  • validator: функция, которая валидирует значение свойства. Если значение корректно, то функция валидатора должна возвращать true, иначе возвращается false.

Если свойства не проходят валидацию, то в консоли браузера отображается соответствующее предупреждение.

Применим эти параметры:

<!DOCTYPE html>
<html>
<head>
<title>Компоненты Vue.js</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
	<input type="text" v-model="user.name" /><br><br>
	<input type="number" v-model.number="user.age" /><br><br>
	<user v-bind="user"></user>
</div>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
<script>
Vue.component('user', {
  props: {
	  name: {
		type: String,
		required: true,
		default: 'Tom',
		validator: function(value){
			return value!='admin' && value!='';
		}
	  }, 
	  age: {
		type: Number,
		required: true,
		default: 18,
		validator: function(value){
			return value >= 0 && value < 100;
		}
	  }
  },
  template: '<div><h2>User</h2><p>Name: {{name}}</p><p>Age: {{age}}</p></div>'
})
new Vue({
	el: "#app",
	data: {
		user: {
			name: '',
			age: 0
		}
	}
});
</script>
</body>
</html>
Валидация props в Vue.js

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850