0
votes

VUE: Le formulaire d'entrée dans un composant ne renvoie pas une valeur

J'ai ce code dans mon composant "Eceedata" avec un champ de saisie: xxx pré>

et j'appelle le composant dans l'application principale.Vue avec: p>

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

javascript vue.js vue-component vuejs2

0 commentaires

3 Réponses :

1
votes

Vous avez défini l'état dans votre composant parent, mais ne le modifiez jamais. L'événement d'autre part émet la valeur modifiée, mais votre fonction Onchange code> ne l'utilise jamais.

Vous devez utiliser la valeur transmise et mettre à jour l'état des parents. P>

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

0 commentaires

2
votes

Vous venez de lier la valeur du parent au composant enfant.

Vous où presque là-bas lorsque vous avez suivi la méthode Vuedataday code> comme rappel de l'événement code> Evénement Cette fonction reçoit la valeur passée par l'événement. P>

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

0 commentaires

0
votes

Vous devez utiliser @Input code> événement au lieu de @Change code> événement. Dans @input code>, vous pouvez appeler une fonction, la fonction intérieure que vous pouvez $ eMit code> méthode parent.

Votre code doit être écrit comme ceci: p>

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

0 commentaires