title: Vue.js pass data from slot into component instance
body: <p>I'm trying to build a re-usable component to deal with submitting forms via AJAX using Vue.js. Ideally, what I want to do is have a generic component that can be used in place of a HTML <code>form</code> element, in that may contain an unknown set of form elements such as <code>input</code>, <code>select</code>, <code>textarea</code> and so on.</p>
  
  <p>I have got the following code for my component which is named <code>ajax-form</code>:</p>
  
  <pre><code>&lt;template&gt;
      &lt;form class="form" :action="action" :method="method" v-on:submit.prevent="ajaxSubmit"&gt;
          &lt;slot&gt;&lt;/slot&gt;
      &lt;/form&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  module.exports = {
      props: {
          action: {
              required: true,
              type: String
          },
          method: {
              default: 'post',
              required: false,
              type: String
          }
      },
      data() {
          return {
              formData: {}
          }
      },
      methods: {
          ajaxSubmit() {
              // Do ajax
          }
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>And in my HTML, I would have something like the following:</p>
  
  <pre><code>&lt;ajax-form action="http://example.com/do/something"&gt;
      &lt;input name="first_name" type="text"&gt;
      &lt;textarea name="about_you"&gt;&lt;/textarea&gt;
  &lt;/ajax-form&gt;
  </code></pre>
  
  <p>What I would ideally like to happen is have all of the form elements that are placed inside my component using it's slot to be mapped to the <code>data.formData</code> property in my Vue component instance. So in this case, the <code>data</code> property would look like:</p>
  
  <pre><code>data: {
      formData: {
          first_name: '',
          about: ''
      }
  }
  </code></pre>
  
  <p>If I was to add another field to the component in my HTML, I would expect that to also be mapped to the Vue instance's <code>data</code> property.</p>
  
  <p>Is there a way I can achieve this? Is there a way that I can tell Vue, when putting my form elements into the component via the slot, that I want this element to be mapped to something in the component's <code>data</code>?</p>
  
  <p>I have tried adding <code>v-model</code> and <code>v-bind</code> on each form element to see if it that would somehow pass the data into the component's data:</p>
  
  <pre><code>&lt;ajax-form action="http://example.com/do/something"&gt;
      &lt;input name="first_name" type="text" v-model="formData.first_name"&gt;
  &lt;/ajax-form&gt;
  </code></pre>
  
  <p>However, Vue complains that reactive data properties must be declared before they're used in the template:</p>
  
  <blockquote>
    <p>[Vue warn]: Property or method "formData" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.</p>
  </blockquote>