MyTetra Share
Делитесь знаниями!
Пользовательские элементы ввода в Vue
24.02.2018
13:21
Автор: br0ke
Текстовые метки: javascript, js, vue, vuejs, vue.js, form, forms, input, v-model, emit, value
Раздел: Информационные технологии - JavaScript - Vue

Чтобы пользовательский компонент поддерживал работу с директивой v-model необходимо выполнить два условия:

  1. компонент должен принимать prop с именем value;
  2. компонент должен порождать событие input с новым значением.


Таким образом,

<input v-model="something">

это всего лишь синтаксический сахар для:

<input
v-bind:value="something"
v-on:input="something = $event.target.value">


Пример:

======

Компонент реализует ввод имени и фамилии, а возвращает объект с этими данными.


<template>

<div class="form-group">

<label for="fullname">Full Name:</label>

<input

type="text"

name="firstname"

class="form-control"

placeholder="First Name"

v-model="value.firstname"

@change="dataChanged">

<input

type="text"

name="lastname"

class="form-control"

placeholder="Last Name"

v-model="value.lastname"

@change="dataChanged">

</div>

</template>


<script>

export default {

props: {

// 1) принимаем prop с именем value

value: {

type: Array,

required: true,

}

},

methods: {

dataChanged() {

// 2) порождаем событие input с новым значением

this.$emit('input', this.value)

}

}

}

</script>


<style>


</style>


Использование:

<app-full-name v-model="fullname"></app-full-name>



Так же в этом разделе:
 
MyTetra Share v.0.52
Яндекс индекс цитирования