Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
vue controlled input
export default {
props: {
value: {
type: [String, Number],
default: '',
},
},
data() {
return {
currentValue: `${this.value}`
}
},
watch: {
value(val, oldVal) {
if (val !== oldVal) {
this.$refs.input.value = val
}
},
},
methods: {
handleChange(e) {
this.$emit('change', e.target.value)
},
handleInput(e) {
e.preventDefault()
let value = this.currentValue = e.target.value
this.$refs.input.value = this.value
this.$emit('input', value)
},
},
render(h) {
const on = {
change: this.handleChange,
input: this.handleInput,
}
const attrs = {
on,
}
return (
<input type="text" {...attrs} value={this.currentValue} ref="input"/>
)
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.