How do I access a value in a child component in vue

user_12224425 0
Viewed 1164

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

vue.js javascript
1 Answers

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
  }
}
user_65166990
Related