Vue: форма ввода в компоненте не возвращает значение - PullRequest
Новая
       2

Vue: форма ввода в компоненте не возвращает значение

0 голосов
/ 25 февраля 2020

У меня есть этот код в моем компоненте "ecedata" с полем ввода: 

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

И я вызываю компонент в основном приложении. vue с помощью: 

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

Но он не возвращает значение на входе в форме, отличной от 0. Где ошибка?

Ответы [ 3 ]

2 голосов
/ 25 февраля 2020

Вы только что связали значение от родительского до дочернего компонента.

Вы почти там, где вы связали метод vuedataday как обратный вызов события changedataday, эта функция получает переданное значение по событию. 

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

Другим способом двухстороннего связывания является использование v-model. 

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

И в дочернем 

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

https://vuejs.org/v2/guide/components.html#Using -v-модель-на-компоненты

1 голос
/ 25 февраля 2020

Вы определили состояние в родительском компоненте, но никогда не меняете его. Событие, с другой стороны, выдает измененное значение, но ваша функция onChange никогда не использует его.

Необходимо использовать переданное значение и обновить состояние родителей. 

vuedataday(value) {
  this.dataday = value;
  alert(this.dataday)
}
0 голосов
/ 25 февраля 2020

Вы должны использовать событие @input вместо события @change. В @input событии вы можете вызвать функцию, внутри функции вы можете $emit родительский метод.

Ваш код должен быть написан так: 

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

Вы должны использовать v-model во входной привязке и props переменная для установки другой переменной в дочернем компоненте. Этот стиль хорошо кодирует в vue.js. Спасибо.

...