Я пытаюсь создать пользовательские обработчики событий для дочерних компонентов / элементов функционального компонента.Проблема в том, что при использовании функции render()
для создания дочерних компонентов я не могу получить доступ к их контексту this
.
Предположим, у нас есть следующий функциональный компонент:
const Aggregate = {
functional: true,
props: {
value: Object // to work with v-model
},
render: function(createElement, context){
const template = []
const inputHandler = function(value, prop){
const data = Object.assign({}, context.props.value, { [prop]: value })
console.log(context.props.value)
console.log(data)
this.$emit('input', data)
}
for (const prop of Object.keys(context.props.value)){
const child = createElement('input', {
props: {
value: context.props[prop]
},
on: {
input: function(event){
// 'this' is not binded here - it is undefined,
// hence the inputHandler() function is
// rising an error
inputHandler.apply(this, [event.target.value, prop])
}
}
})
template.push(child)
}
return template
}
}
Isможно ли получить доступ к контексту this
для vnode, когда создаешь обработчик событий таким образом?
PS Информация о примере использования: я хочу реализовать компонент, который автоматически генерирует элементы <input>
для ресурса и использует дваспособ связывания через директиву v-model
.Я также хочу использовать его в <table>
, где потребуется обтекание в <td>
, поэтому я сделал компонент функциональным.