title: Can't pass Vue variable to hidden input v-model in view(v-for)
body: <p>I'm new to Vue JS and I'm building an application with Laravel Spark and trying to utilize Vue as much as possible.</p>
  
  <p>I have a form to simply add an 'Asset Type' with a component. Once the Asset Type is successfully created, a list of properties is grabbed from the database and set to a 'data' attribute. In my view(I'm using an inline template), I have a 'v-for' that creates a form for each property that has two hidden inputs for the property id and the type id, and one "Add" button that assigns the property to the newly created type. </p>
  
  <p>THE PROBLEM: 
  I can't seem to assign the value of the hidden inputs within the view while using v-models. When I submit one of the forms, the form request data always returns the initial data value from the new SparkForm object. </p>
  
  <p>In other words, I need to assign the hidden input values within the v-for loop in the view.</p>
  
  <p>Here's my component:</p>
  
  <pre><code>Vue.component('new-asset-type', {
  props: [],
  data() {
      return {
          // type_id: this.type_id,
          properties: this.properties,
  
  
          newAssetType: new SparkForm({
              label: null,
              enabled: false,
          }),
          assignPropForm: new SparkForm({
              prop_id: "", 
              type_id: "",
          }),
      };
  },
  methods: {
      createType: function () {
          Spark.post('/asset-types', this.newAssetType)
              .then(response =&gt; { 
                  this.type_id = response.type_id;
                  axios.get('/getTypeNotProps/' + this.type_id).then((response) =&gt; {
                      this.properties = response.data;
                      console.log(this.properties);
                  });
              })
              .catch(response =&gt; { 
                  console.log("fail");
              });
      },
      assignProp: function () {
          Spark.post('/asset-properties/add', this.assignPropForm)
              .then(response =&gt; { 
                  console.log(response);
              })
              .catch(response =&gt; { 
                  console.log("fail");
              });
      }
  }
  </code></pre>
  
  <p>});</p>
  
  <p>And here's my view:</p>
  
  <pre><code>@extends('spark::layouts.app')
  
  @section('content')
  &lt;new-asset-type inline-template&gt;
      &lt;div class="container"&gt;
          &lt;!-- Application Dashboard --&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-8 col-md-offset-2"&gt;
                  &lt;div class="panel panel-default"&gt;
                      &lt;div class="panel-heading"&gt;Add a New Asset Type&lt;/div&gt;
  
                      &lt;div class="panel-body" id="addTypeForm"&gt;
  
  
                          &lt;div class="form-horizontal"&gt;
                              &lt;div class="form-group" :class="{'has-error': newAssetType.errors.has('label')}"&gt;
                                  {{ Form::label('label', 'Label', ['class' =&gt; 'col-md-4 control-label']) }}
                                  &lt;div class="col-md-6" &gt;
                                      &lt;input type="test" name="label" v-model="newAssetType.label"&gt;
  
                                      &lt;span class="help-block" v-show="newAssetType.errors.has('label')"&gt;
                                          @{{ newAssetType.errors.get('label') }}
                                      &lt;/span&gt;
  
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div class="form-group"&gt;
                                  {{ Form::label('enabled', 'Enabled?', ['class' =&gt; 'col-md-4 control-label']) }}
                                  &lt;div class="col-md-6"&gt;                           
                                      &lt;input type="checkbox" name="enabled" v-model="newAssetType.enabled" &gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
  
                              &lt;!-- Submit --&gt;
                              &lt;div class="form-group"&gt;
                                  &lt;div class="col-md-8 col-md-offset-4"&gt;
  
                                      &lt;button class="btn btn-primary" @click="createType" :disabled="newAssetType.busy"&gt;
                                          Create Asset Type
                                      &lt;/button&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div id="assignProps" v-if="newAssetType.successful"&gt;
                                   &lt;!-- Button trigger modal --&gt;
                                  &lt;button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"&gt;
                                      Add Property
                                  &lt;/button&gt;
  
                                  &lt;!-- Modal --&gt;
                                  &lt;div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"&gt;
                                    &lt;div class="modal-dialog" role="document"&gt;
                                      &lt;div class="modal-content"&gt;
                                        &lt;div class="modal-header"&gt;
                                          &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
                                          &lt;h4 class="modal-title" id="myModalLabel"&gt;Add New Property to Asset Type&lt;/h4&gt;
                                        &lt;/div&gt;
                                        &lt;div class="modal-body"&gt;
  
                                              &lt;assign-asset-prop v-for="property in properties" class="panel panel-info property-item"&gt;
                                                 &lt;div class="panel-heading"&gt;@{{ property.label }}&lt;/div&gt;
                                                  &lt;div class="panel-body"&gt;&lt;strong&gt;Input Type: &lt;/strong&gt;@{{ property.input_type }}
                                                      &lt;div class="pull-right"&gt;
                                                          &lt;input type="hidden" name="prop_id" v-bind:value="property.p_id" v-model="assignPropForm.prop_id"&gt;
                                                          &lt;input type="hidden" name="type_id" v-bind:value="property.p_id" v-model="assignPropForm.type_id"&gt;
  
                                                          &lt;button class="btn btn-primary" @click="assignProp" :disabled="assignPropForm.busy"&gt;
                                                              Add
                                                          &lt;/button&gt;
                                                      &lt;/div&gt;
  
                                                  &lt;/div&gt;
                                              &lt;/assign-asset-prop&gt;
  
                                        &lt;/div&gt;
                                        &lt;div class="modal-footer"&gt;
                                          &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
                                          &lt;button type="button" class="btn btn-primary"&gt;Save changes&lt;/button&gt;
                                        &lt;/div&gt;
                                      &lt;/div&gt;
                                    &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/new-asset-type&gt;
  @endsection
  </code></pre>