[Vuejs]-Vue: Input Form in a component doesn't return a value

by

2👍

✅

You just binded the value from the parent to the child component.

You where almost there as you binded the vuedataday method as a callback of the changedataday event this function is receiving the value passed by the event.

vuedataday(newDataday) {
    this.dataday = newDataday;
}

Another way to do two way binding is to use v-model.

<ecedata v-model="dataday"></ecedata>

And in the child

<input v-bind:value="dataday" v-on:change="$emit('input', $event.target.value)" type="number" class="form-input">

https://v2.vuejs.org/v2/guide/components.html#Using-v-model-on-Components

👤Pierre Said

1👍

You defined state in your parent component, but never actually change it. The event on the other hand emits the changed value, but your onChange function never uses it.

You have to use the passed value and update the parents state.

vuedataday(value) {
  this.dataday = value;
  alert(this.dataday)
}
👤oshell

0👍

You should use @input event instead of @change event. In @input event you can call a function, inside function you can $emit parent method.

Your code should be write like this: 

<template>
    <div class="col-l-4">
        <p style="text-align: center">Data/day (GB)</p>
        <div class="form-input-set" style="background: white">
            <input v-model="propsdata" @input="getValue" type="number" class="form-input">
        </div>
    </div>
</template>

<script>
export default {
    name:"ecedata" ,
    props: {
        dataday:Number,
    },
    data () {
      return {
         propsdata: this.dataday
      }
    },

    methods: {
       getValue() {
        this.$emit('changedataday', this.propsdata);
     }
   }
}
</script>

Your should use v-model in input binding and props variable to set another variable in child component. This style is good coding in vue.js. Thanks.

👤Sukanta Bala

Leave a comment