在 Vuejs 中渲染输入字段

Posted 2023-02-23

【中文标题】在 Vuejs 中渲染输入字段

【英文标题】：Rendering input fields in Vuejs

【发布时间】：2019-05-24 23:04:24

【问题描述】：

我正在学习如何在Vuejs 中呈现html 内容我正在尝试构建一个从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-model 中，以检查值是否设置正确我正在使用监视功能

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

但这总是给我错误：

未捕获的类型错误：无法读取 null 的属性“$emit”

我从This VueJS Documentation Link 获取了参考资料。帮我解决这个问题。谢谢。

【参考方案1】：

你应该使用箭头函数，因为你失去了回调中的范围：

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