Vcode is in a child component.
data() {
return {
vcode: null,
};
},
I need to access this value in a parent component method.
verifyCode() {
const code = this.vcode
}
Attempting this returns undefined. How do I access this value?
Update
I tried the suggestions and I still get an undefined value
Input field on child component
<input
class="form-control mt-5"
v-model.trim="vcode"
:class="{'is-invalid' : $v.vcode.$error }"
@input="$v.vcode.$touch(), vcodenum = $event.target.value"
placeholder="Enter your 6 digit code"
/>
On the parent component I added the following where it references the child component
<step2 ref="step2" @on-validate="mergePartialModels" v-on:vcodenum="vcode = $event"></step2>
My method in the parent component
verifyCode() {
const code = this.vcode
console.log(code)
}
I still get undefined.
I also tried this:
Child component
<input
class="form-control mt-5"
v-model.trim="vcode"
:class="{ 'is-invalid': $v.vcode.$error }"
@input="$v.vcode.$touch(), onInput"
placeholder="Enter your 6 digit code"
/>
Props
props: {
value: {
type: [String, Number, Boolean],
default: "",
},
},
method
onInput(e) {
this.$emit('on-input', e.target.value)
},
Parent
<step2 ref="step2" @on-validate="mergePartialModels" :value="vcode" @on-input="handleInput"></step2>
data() {
return {
vcode: null
};
},
method
handleInput(value) {
this.vcode = value
console.log(this.vcode)
},
The value ends up outputting null. If I use the v-bind I get this error: :value=”value” conflicts with v-model on the same element because the latter already expands to a value binding internally
Answer
You can listen in input event on the child and emit the value to parent. This can be reused across the application.
// InputComponent.vue
<input :value="value" @input="onInput" />
....
props: {
value: {
type: [String, Number, Boolean] // Add any custom types,
default: ''
}
},
methods: {
onInput(e) {
this.$emit('on-input', e.target.value)
}
}
// Parent.vue
<InputComponent :value="vCode" @on-input="handleInput" />
....
data() {
return {
vcode: null
}
},
methods: {
handleInput(value) {
this.vode = value
}
}