带有输入处理程序的 Vue 组件 v-model [英] Vue component v-model with input handler
问题描述
我正在尝试为 Vue.js 中的 <input/> 元素制作一个包装组件.
组件:
<div><input v-bind="$attrs" :value="value" @input="input"/>...<模板>Vue.component("我的输入", {继承属性:假，道具:['价值']，方法: {输入($事件):无效{this.$emit("input", $event.target.value)}}})
用法:
这似乎工作得很好.模型通过输入事件处理程序通过发出目标元素值来更新.
但是，现在我正在尝试将此组件与一些现有代码一起使用:
<my-input v-model="myModel2" @input="something = $event.target.value"/>这是我遇到 $emit("input") 事件问题的地方.我收到以下错误:
无法读取未定义的属性值"
所以，我的 $emit 正在发出 value，现在现有的 @input="something..." 事件处理程序可以't 正确引用 $event.
如果我将组件的 input 方法更改为发出 $event 而不是 $event.target.value，新代码似乎工作，但是模型没有得到更新被更新为InputEvent而不是实际的值.
我不确定我需要做什么.
当你 $emit('input') 并且值绑定到 v-model对于文本输入， 的值将更新为您发出的任何内容.对于 $emit('input', $event.target.value)，它是您发出的 中文本的值.该值将在父级中被拦截，正如 v-model 有效地所做的: <my-input :value="inputValue" @input="inputValue = $event">
这意味着 (实际上不会导致输入中的值发生变化).但是，如果您 $emit('input', $event)，那么 v-model 仍将捕获传递的任何值并更新 用它.在这种情况下，正如您所说，它将是实际的输入事件对象.
如果您不想使用绑定到模型的 input 事件，您可以始终使用 自定义 v-model 事件.然后你就可以 $emit('input', $event) 并且不让它影响 v-model 值，相反你可以从 $emit 更新 v-model('custom-event', $event.target.value)
I'm trying to make a wrapper component for an <input/> element in Vue.js.
Component:
<template>
<div>
<input v-bind="$attrs" :value="value" @input="input" />
...
</div>
<template>
Vue.component("my-input", {
inheritAttrs: false,
props: ['value'],
methods: {
input($event): void {
this.$emit("input", $event.target.value)
}
}
})
Usage:
<my-input v-model="myModel" />
This seems to work just fine. The model gets updated via the input event handler by emitting the target element value.
However, now I'm trying to use this component with some existing code:
<my-input v-model="myModel2" @input="something = $event.target.value" />
This is where I'm having trouble with the $emit("input") event. I'm getting the following error:
Cannot read property 'value' of undefined
So, my $emit is emitting the value and now the existing @input="something..." event handler can't reference the $event properly.
If I change my component's input method to emit the $event instead of $event.target.value, the new code seems to work, but then model doesn't get updated gets updated to the InputEvent instead of the actual value.
I'm not sure what I need to do.
When you $emit('input') and the value is tied to a v-model of a text input, the value of the <input> will be updated to whatever you emitted. In the case of $emit('input', $event.target.value), it's the value of the text in the <input> that you are emitting. This value will be intercepted in the parent, as v-model effectively does: <my-input :value="inputValue" @input="inputValue = $event">
This means the value of the <input> will get bound back to the <input> (effectively causing no change to the value in the input). If, however, you $emit('input', $event), then v-model will still capture whatever value is passed up and update the value of the <input> with it. In this case, it will be the actual input event object, as you've said.
If you don't want to use the input event tied to your model, you could always use a custom v-model event. Then you'd be able to $emit('input', $event) and not have it affect the v-model value, instead you'd update the v-model from $emit('custom-event', $event.target.value)
这篇关于带有输入处理程序的 Vue 组件 v-model的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
