Comment déclencher une forme à l'intérieur d'un composant du magasin VueX

voix
0

J'appelle une action dans le magasin pour envoyer des données à une API. Cet appel est déclenché à partir d'un bouton dans FormComponent de @Cliquez:

<button type=button @click=$store.dispatch('saveStoreDatas')>Click me</button>

Comment puis-je soumettre le formulaire parent de bouton (code omis)? Je ne peux pas utiliser ref parce qu'il est à l'intérieur d'un composant.

Je vous remercie !

Créé 20/10/2018 à 03:15
source utilisateur
Dans d'autres langues...                            


2 réponses

voix
1

Avez - vous besoin d'envoyer une action et soumettre le formulaire? Normalement , vous pouvez juste avoir des données de formulaire dans le magasin et l' envoyer dans l'action.

Si vous avez vraiment besoin de soumettre le formulaire, émettre un événement dans le composant enfant et écouter l'événement dans le composant parent.

composante enfant va comme ceci.

<!-- child component template -->
<button type="button" @click="handleClick">Click me</button>

// child component script
methods: {
    handleClick () {
        this.$store.dispatch('saveStoreDatas')
        this.$emit('clickSubmit')
    }
}

Et c'est son parent.

<!-- parent template -->
<form ref="form">
    <child-component @clickSubmit="submitForm">
</form>

// parent component script
methods: {
    submitForm () {
        this.$refs.form.submit()
    }
}
Créé 20/10/2018 à 12:24
source utilisateur

voix
0

Ajouter une fonction distincte pour le gestionnaire de clic:

<button type="button" @click.prevent="submitToStore">Click me</button>
...
...
methods () {
  submitToStore () {
    // refs can be used here - get your form data and send it to the store
    let formData = this.$refs.myForm.data()
    this.$store.dispatch('saveStoreDatas', formData)
    ...
  }
  ...
}

J'espère que cela t'aides.

Créé 20/10/2018 à 03:50
source utilisateur

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more