Javascript 在Vuejs中呈现输入字段
我正在学习如何在Javascript 在Vuejs中呈现输入字段,javascript,html,vue.js,vuejs2,vue-component,Javascript,Html,Vue.js,Vuejs2,Vue Component,我正在学习如何在Vuejs中呈现HTML内容,我正在尝试构建一个从render函数生成的小输入组件。它看起来像这样: export default { name: "nits-input", methods: { }, props: { label: String, hint: String, error: String, placeholder: String }, render
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>
但这总是给我错误:
未捕获的TypeError:无法读取null的属性“$emit”
我已经从你那里得到了推荐信。帮我解决这个问题。谢谢。您应该使用arrow函数,因为您正在该回调中失去作用域:
on: {
input:(event)=> {
this.$emit('input', event.target.value)
}
}
on: {
input:(event)=> {
this.$emit('input', event.target.value)
}
}