CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-component
Felixkruemel
Felixkruemel

Reputation: 514

Vue: Input Form in a component doesn't return a value

I've got this code in my "ecedata" component with an input field:

<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-bind:value="dataday" v-on:change="$emit('changedataday', $event.target.value)" type="number" class="form-input">
        </div>
    </div>
</template>

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

      }
    },

}
</script>

And I'm calling the component in the main app.vue with:

<template>
    <ecedata v-bind:dataday="dataday" v-on:changedataday="vuedataday" ></ecedata>
</template>

<script>
  import ecedata from '@/components/ece/data/ecedata.vue'

  export default {
    name: 'app',
    components: {
      ecedata,
    },
    data () {
      return {
          dataday:0,
      }
    },
    methods: {
      vuedataday() {
        alert(this.dataday)
      }
    },

  };

</script>

But it doesn't return a value on input in the form other than 0. Where's the error?

Upvotes: 0

Views: 635

Answers (3)

Pierre Said
Pierre Said

Reputation: 3820

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

Upvotes: 2

Sukanta Bala
Sukanta Bala

Reputation: 879

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.

Upvotes: 0

oshell
oshell

Reputation: 9103

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)
}

Upvotes: 1

Related Questions