Визуализация полей ввода в Vuejs

Question

Я учусь, как отображать содержимое HTML в Vuejs Я пытаюсь создать небольшой компонент ввода, который генерируется из функции render.Это выглядит примерно так:

export default {
    name: "nits-input",
    methods: {

    },
    props: {
        label: String,
        hint: String,
        error: String,
        placeholder: String
    },
    render (createElement) {

        //Help action text
        let helpText = this.hint ? createElement('span', { class: 'm-form__help' }, this.hint) : ''

        //Error Text
        let errorText = this.error ? createElement('span', { class: 'm--font-danger' }, this.error) : ''

        return createElement('div', { class: ''}, [
            createElement('label', this.label),
            createElement('input', {
                class: 'form-control m-input',
                attrs: { type: this.type, placeholder: this.placeholder },
                domProps: { value: self.value},
                on: {
                    input: function (event) {
                        this.$emit('input', event.target.value)
                    }
                }
            }),
            helpText, errorText
        ])
    }
}

При вызове этого компонента я делаю следующее:

<div class="form-group m-form__group">
    <nits-input
            label="Email Address"
            type="email"
            hint="We'll never share your email with anyone else."
            placeholder="Enter email"
            v-model="email"
    >
    </nits-input>
</div>
<div class="form-group m-form__group">
    <nits-input
            label="Password"
            type="password"
            placeholder="Enter password"
            v-model="password"
    >
    </nits-input>
</div>

Я хочу, чтобы значение было сохранено в v-модели, чтобы проверить значенияустанавливаются правильно Я использую функцию наблюдения

watch: {
    email () {
        console.log('Email v-model defined as '+this.email)
    },
    password() {
        console.log('Password v-model defined as '+this.password)
    }
}

Но это всегда вызывает ошибку:

Uncaught TypeError: Невозможно прочитать свойство '$ emit' из null

Я взял ссылки от Эта ссылка на документацию VueJS .Помоги мне в этом.Благодаря.

Answer 1

Вы должны использовать функцию стрелки, так как вы теряете область действия внутри этого обратного вызова:

on: {
   input:(event)=> {
      this.$emit('input', event.target.value)
             }
    }