pui9-components 1.16.4

package/src/tests/TestInputDate.vue

@@ -0,0 +1,146 @@
+<template>
+	<v-container>
+		<v-flex xs12>
+			<v-card class="pa-4 mt-4">
+				<h2 class="mb-4">Date</h2>
+				<!-- Date básico-->
+				<pui-date-field label="Campo de fecha básico" v-model="model1"></pui-date-field>
+				<!-- Date básico con formato-->
+				<pui-date-field label="Campo de fecha con formato YYYY-MM-DD" v-model="model2" isoDateFormat="YYYY-MM-DD"></pui-date-field>
+				<!-- Campo de fecha básico no editable a mano-->
+				<pui-date-field label="Campo de fecha básico no editable a mano" v-model="model3" disableTextInput></pui-date-field>
+				<!-- Date básico etiqueta arriba-->
+				<pui-date-field label="Campo de fecha etiqueta arriba" v-model="model4" toplabel></pui-date-field>
+				<!-- Date básico con estilos de columna-->
+				<pui-date-field
+					label="Campo de fecha con estilos de columna"
+					v-model="model4"
+					required
+					labelColumnStyles="xs12 md4 xl2"
+					valueColumnStyles="xs12 md8 xl10"
+				></pui-date-field>
+				<!-- Date obligatorio-->
+				<pui-date-field label="Campo de fecha obligatorio" v-model="model5" required></pui-date-field>
+				<!-- Date obligatorio-->
+				<pui-date-field label="Campo de fecha desactivado" v-model="model6" disabled></pui-date-field>
+				<!-- Date con fecha delimitando mínima y máxima-->
+				<pui-date-field
+					label="Campo de fecha delimitando mínima y máxima"
+					v-model="model7"
+					:min="model7min"
+					:max="model7max"
+				></pui-date-field>
+
+				<!-- Campo con fecha sin separador-->
+				<pui-date-field label="Campo de fecha sin separador: YYYYMMDD" v-model="model8" isoDateFormat="YYYYMMDD"></pui-date-field>
+				<!-- Campo con fecha de hoy-->
+				<pui-date-field label="Campo de fecha de hoy" v-model="model9" today></pui-date-field>
+				<!-- Campo con fecha y hora-->
+				<pui-date-field label="Campo de fecha y hora: DD-MM-YYYY HH:mm" v-model="model10" time></pui-date-field>
+				<!-- Campo con fecha y hora HH:MM:SS-->
+				<pui-date-field label="Campo de fecha y hora: DD-MM-YYYY HH:mm:ss" v-model="model11" timesecs></pui-date-field>
+				<!-- Campo con fecha con model nulo: DD-MM-YYYY-->
+				<pui-date-field label="Campo de fecha con model nulo" v-model="model12"></pui-date-field>
+				<!-- Campo con fecha sin model y today: DD-MM-YYYY HH:mm:ss-->
+				<pui-date-field label="Campo de fecha con modeles nulos" v-model="model13" timesecs></pui-date-field>
+				<!-- Campo con fecha NO LAZY-->
+				<pui-date-field label="Campo de fecha NO lazy" v-model="model14" noLazyModel></pui-date-field>
+			</v-card>
+			<v-card class="pa-4 mt-4">
+				<h2 class="mb-4">Linked dates</h2>
+				<!-- Date básico-->
+				<pui-date-field label="Campo de fecha A" v-model="model20"></pui-date-field>
+				<!-- Date básico con formato-->
+				<pui-date-field label="Campo de fecha B enlazado con A (fecha A es la mínima)" v-model="model21" :min="model20"></pui-date-field>
+				<!-- Date básico con formato-->
+				<pui-date-field label="Campo de fecha C enlazado con A (fecha A es la máxima)" v-model="model22" :max="model20"></pui-date-field>
+			</v-card>
+			<v-card class="pa-4 mt-4">
+				<h2 class="mb-4">Linked dates each others</h2>
+				<!-- Date básico-->
+				<pui-date-field label="Campo de fecha INICIAL" v-model="model30" :max="model31"></pui-date-field>
+				<!-- Date básico con formato-->
+				<pui-date-field label="Campo de fecha FINAL" v-model="model31" :min="model30"></pui-date-field>
+			</v-card>
+		</v-flex>
+	</v-container>
+</template>
+
+<script>
+import PuiDateField from '@/components/PuiDateField';
+
+export default {
+	name: 'TestInputDate',
+	components: { PuiDateField },
+	data() {
+		return {
+			model1: null,
+			model2: null,
+			model3: null,
+			model4: null,
+			model5: null,
+			model6: null,
+			model7min: '2019-01-13T18:30:30.123Z',
+			model7max: '2019-02-17T18:30:30.123Z',
+			model7: null,
+
+			model8: null,
+			model9: null,
+			model10: null,
+			model11: null,
+			model12: null,
+			model13: null,
+			model14: '2019-02-17T18:30:30.123+07:00',
+
+			model20: null,
+			model21: null,
+			model22: null,
+
+			model30: null,
+			model31: null,
+
+			errorMessage: 'Mensaje de error del input',
+			message:
+				'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s.'
+		};
+	},
+	methods: {
+		printModel(modelName, value) {
+			console.log(modelName, value);
+		},
+		lazyLoadTest() {
+			setTimeout(() => {
+				this.model1 = '2019-02-11T18:30:30.123Z';
+				this.model2 = '2019-02-13T18:30:30.123Z';
+				this.model3 = '2018-02-13T18:30:30.123Z';
+				this.model4 = '2019-02-15T18:30:30.123+06:00';
+				this.model5 = '2019-02-13T18:30:30.123-06:00';
+				this.model6 = '2019-02-11T18:30:30.123Z';
+				this.model7 = '2019-02-11T18:30:30.123Z';
+				this.model8 = '2018-02-11T18:30:30.123Z';
+				this.model10 = '2018-02-11T12:30:30.123+03:00';
+				this.model11 = '2018-02-11T12:30:30.123-01:00';
+				this.model12 = null;
+				this.model13 = null;
+				this.model20 = '2018-02-11T12:30:30.123+03:00';
+				this.model21 = '2018-02-12T12:30:30.123+03:00';
+				this.model22 = '2018-02-13T12:30:30.123+03:00';
+
+				this.model30 = '2018-02-11T12:30:30.123+03:00';
+				this.model31 = '2019-02-12T12:30:30.123+03:00';
+				console.log('TestInputDate', 'Cargando modelos lazy');
+			}, 4000);
+			setTimeout(() => {
+				this.model7min = '2019-01-11T18:30:30.123Z';
+				this.model7max = '2019-02-19T18:30:30.123Z';
+			}, 6000);
+		}
+	},
+	created() {
+		for (let i = 1; i <= 100; i++) {
+			this.$watch(() => this[`model${i}`], this.printModel.bind(this, `Model${i}`));
+		}
+		this.lazyLoadTest();
+	}
+};
+</script>

package/src/tests/TestInputNumber.vue

@@ -0,0 +1,77 @@
+<template>
+	<v-container>
+		<v-flex xs12>
+			<v-card class="pa-4 mt-4">
+				<h2 class="mb-4">Campo numérico</h2>
+				<!-- Campo numérico básico-->
+				<pui-number-field label="Campo numérico básico" id="model40" v-model="model40"></pui-number-field>
+				<!-- Campo numérico requerido-->
+				<pui-number-field label="Campo numérico requerido" v-model="model41" required></pui-number-field>
+				<!-- Campo numérico máximo decimales-->
+				<pui-number-field label="Campo numérico máximo decimales" v-model="model42" decimals="5"></pui-number-field>
+				<!-- Campo numérico valor máximo y mínimo-->
+				<pui-number-field label="Campo numérico valor máximo y mínimo" v-model="model43" min="-2.1" max="12.5"></pui-number-field>
+				<!-- Campo numérico valor entero-->
+				<pui-number-field label="Campo numérico valor entero" v-model="model44" integer></pui-number-field>
+				<!-- Campo numérico con label arriba-->
+				<pui-number-field label="Campo numérico con label arriba" v-model="model45" toplabel required></pui-number-field>
+				<!-- Campo numérico con estilos de columna-->
+				<pui-number-field
+					label="Campo numérico con estilos de columna"
+					v-model="model45"
+					required
+					labelColumnStyles="xs12 md4 xl2"
+					valueColumnStyles="xs12 md8 xl10"
+				></pui-number-field>
+				<!-- Campo numérico con modelo NO lazy-->
+				<pui-number-field label="Campo numérico con modelo NO lazy" v-model="model46" noLazyModel required></pui-number-field>
+			</v-card>
+		</v-flex>
+	</v-container>
+</template>
+
+<script>
+import PuiNumberField from '@/components/PuiNumberField';
+
+export default {
+	name: 'TestInputNumber',
+	components: { PuiNumberField },
+	data() {
+		return {
+			model40: null,
+			model41: null,
+			model42: null,
+			model43: null,
+			model44: null,
+			model45: null,
+			model46: 5.67,
+
+			errorMessage: 'Mensaje de error del input',
+			message:
+				'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s.'
+		};
+	},
+	methods: {
+		printModel(modelName, value) {
+			console.log(modelName, value);
+		},
+		lazyLoadTest() {
+			setTimeout(() => {
+				this.model40 = 52.567;
+				this.model41 = 12345678.765;
+				this.model42 = 12345.6789;
+				this.model43 = 12.6;
+				this.model44 = 2.5565;
+				this.model45 = -7.56565;
+				console.log('TestInputNumber', 'Cargando modelos lazy');
+			}, 3000);
+		}
+	},
+	created() {
+		for (let i = 1; i <= 100; i++) {
+			this.$watch(() => this[`model${i}`], this.printModel.bind(this, `Model${i}`));
+		}
+		this.lazyLoadTest();
+	}
+};
+</script>

package/src/tests/TestInputRadioGroup.vue

@@ -0,0 +1,86 @@
+<template>
+	<v-container>
+		<v-flex xs12>
+			<v-card class="pa-4 mt-4">
+				<h2 class="mb-4">Radios</h2>
+				<!-- Radio simple columna-->
+				<pui-radio-group label="Radio simple columna" v-model="model80" column :radios="radios1"></pui-radio-group>
+				<!-- Radio simple fila-->
+				<pui-radio-group label="Radio simple fila" v-model="model81" row :radios="radios2" required></pui-radio-group>
+				<!-- Radio simple fila con etiqeta arriba-->
+				<pui-radio-group label="Radio simple fila con etiqueta arriba" v-model="model82" row :radios="radios3" toplabel></pui-radio-group>
+			</v-card>
+		</v-flex>
+	</v-container>
+</template>
+
+<script>
+import PuiRadioGroup from '@/components/PuiRadioGroup';
+
+export default {
+	name: 'TestInputRadioGroup',
+	components: { PuiRadioGroup },
+	data() {
+		return {
+			model80: 1,
+			radios1: [
+				{
+					id: 1,
+					label: 'Radio X',
+					value: 'x'
+				},
+				{
+					id: 2,
+					label: 'Radio Y',
+					value: 'y'
+				}
+			],
+			model81: 2,
+			radios2: [
+				{
+					id: 1,
+					label: 'Radio Z',
+					value: 'z'
+				},
+				{
+					id: 2,
+					label: 'Radio W',
+					value: 'w'
+				}
+			],
+			model82: 3,
+			radios3: [
+				{
+					id: 1,
+					label: 'Radio A',
+					value: 'a'
+				},
+				{
+					id: 2,
+					label: 'Radio B',
+					value: 'b'
+				},
+				{
+					id: 3,
+					label: 'Radio C',
+					value: 'c'
+				}
+			],
+			errorMessage: 'Mensaje de error del input',
+			message:
+				'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s.'
+		};
+	},
+
+	methods: {
+		printModel(modelName, value) {
+			console.log(modelName, value);
+		}
+	},
+	created() {
+		for (let i = 1; i <= 100; i++) {
+			this.$watch(() => this[`model${i}`], this.printModel.bind(this, `Model${i}`));
+		}
+	}
+};
+</script>

package/src/tests/TestInputSpinner.vue

@@ -0,0 +1,77 @@
+<template>
+	<v-container>
+		<v-flex xs12>
+			<v-card class="pa-4 mt-4">
+				<h2 class="mb-4">Spinner</h2>
+				<!-- Number input - Spinner-->
+				<pui-spinner-field label="Spinner básico" v-model="model30"></pui-spinner-field>
+				<!-- Number input - Spinner carga modelo NO lazy-->
+				<pui-spinner-field label="Spinner modelo NO lazy" v-model="model31" noLazyModel></pui-spinner-field>
+				<!-- Number input - Spinner-->
+				<pui-spinner-field label="Spinner con sufijo" v-model="model32" suffix="m"></pui-spinner-field>
+				<!-- Number input - Spinner-->
+				<pui-spinner-field label="Spinner con max y min" v-model="model33" max="7" min="-2"></pui-spinner-field>
+				<!-- Number input - Spinner-->
+				<pui-spinner-field label="Spinner etiqueta arriba" v-model="model34" toplabel></pui-spinner-field>
+				<!-- Number input - Spinner-->
+				<pui-spinner-field label="Spinner valor inicial null" v-model="model35" toplabel></pui-spinner-field>
+				<!-- Number input - Spinner-->
+				<pui-spinner-field label="Spinner con ancho definido 150px" v-model="model36" width="150"></pui-spinner-field>
+				<!-- Number input - Spinner-->
+				<pui-spinner-field label="Spinner con max y min dinámico" v-model="model37" :max="maxVal" :min="minVal"></pui-spinner-field>
+				<v-btn @click="changeMinMax">Incrementar max ({{ maxVal }}) y min ({{ minVal }}) del spinner anterior en 1</v-btn>
+			</v-card>
+		</v-flex>
+	</v-container>
+</template>
+
+<script>
+import PuiSpinnerField from '@/components/PuiSpinnerField';
+
+export default {
+	name: 'TestInputSpinner',
+	components: { PuiSpinnerField },
+	data() {
+		return {
+			model30: null,
+			model31: 0,
+			model32: null,
+			model33: null,
+			model34: null,
+			model35: null,
+			model36: null,
+			model37: null,
+			minVal: 0,
+			maxVal: 5,
+			errorMessage: 'Mensaje de error del input',
+			message:
+				'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s.'
+		};
+	},
+	methods: {
+		printModel(modelName, value) {
+			console.log(modelName, value);
+		},
+		lazyLoadTest() {
+			setTimeout(() => {
+				this.model30 = 2;
+				this.model32 = 3;
+				this.model33 = 4;
+				this.model34 = 5;
+				this.model35 = 6;
+				this.model36 = 7;
+			}, 3000);
+		},
+		changeMinMax() {
+			this.minVal = this.minVal + 1;
+			this.maxVal = this.maxVal + 1;
+		}
+	},
+	created() {
+		for (let i = 1; i <= 100; i++) {
+			this.$watch(() => this[`model${i}`], this.printModel.bind(this, `Model${i}`));
+		}
+		this.lazyLoadTest();
+	}
+};
+</script>

package/src/tests/TestInputSwitch.vue

@@ -0,0 +1,52 @@
+<template>
+	<v-container>
+		<v-flex xs12>
+			<v-card class="pa-4 mt-4">
+				<h2 class="mb-4">Selectores</h2>
+
+				<!-- Switch básico -->
+				<pui-switch label="Switch básico" v-model="model66"></pui-switch>
+				<!-- Switch básico deseleccionado -->
+				<pui-switch label="Switch básico deseleccionado" v-model="model67"></pui-switch>
+				<!-- Switch básico desactivado -->
+				<pui-switch label="Switch básico desactivado" v-model="model68" disabled></pui-switch>
+				<!-- Switch requerido-->
+				<pui-switch label="Switch requerido" v-model="model69" required></pui-switch>
+				<!-- Switch devolviendo S ó N-->
+				<pui-switch label="Switch devolviendo S ó N" v-model="model70" true-value="S" false-value="N"></pui-switch>
+			</v-card>
+		</v-flex>
+	</v-container>
+</template>
+
+<script>
+import PuiSwitch from '@/components/PuiSwitch';
+
+export default {
+	name: 'TestInputSwitch',
+	components: { PuiSwitch },
+	data() {
+		return {
+			model66: true,
+			model67: false,
+			model68: false,
+			model69: false,
+			model70: 'S',
+			errorMessage: 'Mensaje de error del input',
+			message:
+				'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s.'
+		};
+	},
+
+	methods: {
+		printModel(modelName, value) {
+			console.log(modelName, value);
+		}
+	},
+	created() {
+		for (let i = 1; i <= 100; i++) {
+			this.$watch(() => this[`model${i}`], this.printModel.bind(this, `Model${i}`));
+		}
+	}
+};
+</script>

package/src/tests/TestInputText.vue

@@ -0,0 +1,120 @@
+<template>
+	<v-container>
+		<v-flex xs12>
+			<v-card class="pa-4 mt-4">
+				<h2 class="mb-4">Campo de texto</h2>
+				<!-- Input text-->
+				<pui-text-field label="Campo básico" placeholder=" " v-model="model1"></pui-text-field>
+				<!-- Input text with placeholder -->
+				<pui-text-field label="Campo con placeholder" v-model="model2" placeholder="Placeholder"></pui-text-field>
+				<!-- Input text required -->
+				<pui-text-field label="Campo requerido" v-model="model11" required placeholder=" "></pui-text-field>
+				<!-- Input text sin efecto editable -->
+				<pui-text-field label="Campo sin efecto editable" placeholder=" " v-model="model4" noeditable></pui-text-field>
+				<!-- Input text disabled -->
+				<pui-text-field label="Campo desactivado" v-model="model5" disabled></pui-text-field>
+				<!-- Input text solo lectura -->
+				<pui-text-field label="Campo solo lectura" v-model="model14" readonly></pui-text-field>
+				<!-- Input text error -->
+				<pui-text-field label="Campo con error" placeholder=" " v-model="model6" error :error-messages="errorMessage"></pui-text-field>
+				<!-- Input text special -->
+				<puipasswordfield label="Contraseña" v-model="model7"></puipasswordfield>
+				<!-- Input text message -->
+				<pui-text-field label="Campo con Mensaje" placeholder=" " v-model="model8" value="53aa" :messages="message"></pui-text-field>
+				<!-- Input text prefix -->
+				<pui-text-field label="Campo con prefijo" placeholder=" " v-model="model9" value="56.8" prefix="$"></pui-text-field>
+				<!-- Input text suffix -->
+				<pui-text-field label="Campo con sufijo" placeholder=" " v-model="model10" required suffix="m3"></pui-text-field>
+				<!-- Input text top label -->
+				<pui-text-field label="Campo con label arriba" placeholder=" " v-model="model12" toplabel required></pui-text-field>
+				<!-- Input text with styles -->
+				<pui-text-field
+					label="Campo con estilos de columnas"
+					placeholder="Label (xs12 md4 xl2), Input (xs12 md8 xl10)"
+					v-model="model12"
+					labelColumnStyles="xs12 md4 xl2"
+					valueColumnStyles="xs12 md8 xl10"
+					required
+				></pui-text-field>
+				<!-- Input text con botón de limpiado -->
+				<pui-text-field label="Campo con botón de limpiado" placeholder=" " v-model="model13" clearable></pui-text-field>
+				<!-- Input text de búsqueda con etiqueta sin efecto editable y sincronizado con el padre en tiempo real-->
+				<pui-text-field
+					label="Campo de búsqueda con etiqueta no editable"
+					placeholder="Buscar"
+					v-model="model15"
+					clearable
+					prepend-inner-icon="far fa-search"
+					noeditable
+					realtime
+				></pui-text-field>
+				<!-- Input text de búsqueda sin etiqueta sin efecto editable y sincroniza con el padre en tiempo real -->
+				<pui-text-field
+					placeholder="Buscar"
+					v-model="model16"
+					clearable
+					prepend-inner-icon="far fa-search"
+					noeditable
+					realtime
+				></pui-text-field>
+				<!-- Input text con carga NO lazy-->
+				<pui-text-field label="Campo de texto sin carga Lazy" placeholder v-model="model17" noLazyModel></pui-text-field>
+				<!-- Campo de tipo contraseña -->
+				<pui-password-field label="Contraseña" v-model="model18"></pui-password-field>
+			</v-card>
+		</v-flex>
+	</v-container>
+</template>
+
+<script>
+import PuiTextField from '@/components/PuiTextField';
+import PuiPasswordField from '@/components/PuiPasswordField';
+
+export default {
+	name: 'TestInputText',
+	components: { PuiTextField, PuiPasswordField },
+	data() {
+		return {
+			model1: null,
+			model2: null,
+			model3: null,
+			model4: null,
+			model5: 'disabled',
+			model6: null,
+			model7: null,
+			model8: '',
+			model9: null,
+			model10: null,
+			model11: null,
+			model12: null,
+			model13: null,
+			model14: 'readonly',
+			model15: null,
+			model16: null,
+			model17: 'No lazy load',
+			errorMessage: 'Mensaje de error del input',
+			message:
+				'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s.'
+		};
+	},
+	methods: {
+		printModel(modelName, value) {
+			console.log(modelName, value);
+		},
+		lazyLoadTest() {
+			setTimeout(() => {
+				this.model1 = 'lazy load';
+				this.model2 = 'lazy load';
+				this.model14 = 'lazy load';
+				console.log('TestInputText:', 'Cargando modelos lazy');
+			}, 2000);
+		}
+	},
+	created() {
+		for (let i = 1; i <= 100; i++) {
+			this.$watch(() => this[`model${i}`], this.printModel.bind(this, `Model${i}`));
+		}
+		this.lazyLoadTest();
+	}
+};
+</script>

package/src/tests/TestInputTextArea.vue

@@ -0,0 +1,73 @@
+<template>
+	<v-container>
+		<v-flex xs12>
+			<v-card class="pa-4 mt-4">
+				<h2 class="mb-4">Area de texto</h2>
+				<!-- Text area-->
+				<pui-text-area label="Área de texto básica" v-model="model20"></pui-text-area>
+				<!-- Text area desactivado-->
+				<pui-text-area label="Área de texto desactivada" v-model="model21" disabled></pui-text-area>
+				<!-- Text area requerido-->
+				<pui-text-area label="Área de texto requerido" v-model="model22" required></pui-text-area>
+				<!-- Text area label arriba-->
+				<pui-text-area label="Área de texto label arriba" v-model="model23" toplabel required></pui-text-area>
+				<!-- Text area con estilos de columna-->
+				<pui-text-area
+					label="Área de texto con estilos de columna"
+					v-model="model23"
+					required
+					labelColumnStyles="xs12 md4 xl2"
+					valueColumnStyles="xs12 md8 xl10"
+				></pui-text-area>
+				<!-- Text area solo lectura-->
+				<pui-text-area label="Área de texto solo lectura" v-model="model24" readonly></pui-text-area>
+				<!-- Text area texto placeholder-->
+				<pui-text-area label="Área de texto con placeholder" v-model="model25" placeholder="Añade texto aquí"></pui-text-area>
+				<!-- Text area NO lazy load-->
+				<pui-text-area label="Área de texto NO lazy" v-model="model27" placeholder noLazyLoad></pui-text-area>
+			</v-card>
+		</v-flex>
+	</v-container>
+</template>
+
+<script>
+import PuiTextArea from '@/components/PuiTextArea';
+
+export default {
+	name: 'TestInputTextArea',
+	components: { PuiTextArea },
+	data() {
+		return {
+			model20: null,
+			model21: 'value value value',
+			model22: 'required required',
+			model23: 'label top',
+			model24: 'Solo lectura',
+			model25: 'Placeholder',
+			model26: '',
+			model27: '',
+			errorMessage: 'Mensaje de error del input',
+			message:
+				'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s.'
+		};
+	},
+	methods: {
+		printModel(modelName, value) {
+			console.log(modelName, value);
+		},
+		lazyLoadTest() {
+			setTimeout(() => {
+				this.model20 = 'lazy load';
+				this.model21 = 'lazy load';
+				console.log('TestInputTextArea:', 'Cargando modelos lazy');
+			}, 3000);
+		}
+	},
+	created() {
+		for (let i = 1; i <= 100; i++) {
+			this.$watch(() => this[`model${i}`], this.printModel.bind(this, `Model${i}`));
+		}
+		this.lazyLoadTest();
+	}
+};
+</script>