Vuejs return form data from other component

Question

I have an App.vue where I load a form with input fields (component). Submitting method works but I am not getting any data from the form input field title.

How can I achieve that?

App.vue:

<form v-on:submit.prevent="getFormValues">
    <page-header :title="'Banner toevoegen'"></page-header>
    <form-input :label="'title'" :labelvalue="'Titel'" :type="'text'" :placeholder="''" :name="'title'" :value="''" :classname="'form-control'" :id="''"></form-input>
    <form-input :label="''" :labelvalue="''" :type="'submit'" :placeholder="''" :name="'title'" :value="'banner toevoegen'" :classname="'form-control'" :id="''"></form-input>
</form>

AND method

methods: {
        getFormValues (submitEvent) {
            this.name = submitEvent.target.elements.title.value
            console.log(this.title)
        },

Input.vue:

<template>
     <div>
        <div class="form-group">
            <label v-if="label" :for="label" v-html="labelvalue"></label>
            <input :type="type" :placeholder="placeholder" :name="name" :value="value" :class="classname" :id="id">
        </div>
     </div>
</template>


<script>
    export default {
        props: {
            type: String,
            placeholder: String,
            name: String,
            value: String,
            classname: String,
            id: String,
            label: String,
            labelvalue: String
        }
    }
</script>

Vue has this interesting thing called [v-model](https://vuejs.org/v2/guide/forms.html), maybe this is preferable to binding `value` ? There's also this thing called [ref](https://vuejs.org/v2/api/#ref) which would help you retrieving the values (instead of browsing the DOM via `event.target`). — Vivick, May 07 '18 at 15:02
i'm not sure what you're trying to achieve but i think `v-model` can be useful for your issue. [Here](https://stackoverflow.com/a/47312172/9541423) a solution to a similar issue (i guess) — Sovalina, May 07 '18 at 15:08
it seems you'd like to sync the change in child component to the parent component, check this [Vue Guide: customized V-model](https://vuejs.org/v2/guide/components-custom-events.html#Customizing-Component-v-model), you need to emit one event from Input.Vue to the parent component to notify the parent update something. — Sphinx, May 07 '18 at 16:12

ricardoorellana · Accepted Answer · 2018-05-07T21:10:41.473

You can do it using $event variable, it access the original DOM event in an inline statement handler.

So you should have something like this in your form-input:

<template>
    <input
      v-on:input="updateValue($event)"
      type="text" 
    />
</template>

<script>
export default {
  methods: {
    updateValue: function (evt) {
      this.$emit('input', evt)
    }
  }
}
</script>

And in your app.vue (parent component) you may access to that DOM element:

<template>
  <div id="app">
    <form-input
      v-on:input="evt => {value = evt.target.value}"
    />
  </div>
</template>

Please take a look to this simple working example https://jsfiddle.net/ricardoorellana/cj6gtsL5/2/

Vuejs return form data from other component

1 Answers1