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

Question

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?

tony19 · Accepted Answer · 2022-07-15 04:29:32Z

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

edited Jul 15, 2022 at 4:29

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Feb 25, 2020 at 9:50

Pierre Said

3,8901 gold badge22 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

oshell · Accepted Answer · 2020-02-25 09:47:53Z

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

answered Feb 25, 2020 at 9:47

oshell

9,1511 gold badge31 silver badges50 bronze badges

Comments

Sukanta Bala · Accepted Answer · 2020-02-25 09:59:56Z

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.

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related