Can't pass Vue variable to hidden input v-model in view(v-for)

Question

I'm new to Vue JS and I'm building an application with Laravel Spark and trying to utilize Vue as much as possible.

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.

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.

In other words, I need to assign the hidden input values within the v-for loop in the view.

Here's my component:

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 => { 
                this.type_id = response.type_id;
                axios.get('/getTypeNotProps/' + this.type_id).then((response) => {
                    this.properties = response.data;
                    console.log(this.properties);
                });
            })
            .catch(response => { 
                console.log("fail");
            });
    },
    assignProp: function () {
        Spark.post('/asset-properties/add', this.assignPropForm)
            .then(response => { 
                console.log(response);
            })
            .catch(response => { 
                console.log("fail");
            });
    }
}

});

And here's my view:

@extends('spark::layouts.app')

@section('content')
<new-asset-type inline-template>
    <div class="container">
        <!-- Application Dashboard -->
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">Add a New Asset Type</div>

                    <div class="panel-body" id="addTypeForm">


                        <div class="form-horizontal">
                            <div class="form-group" :class="{'has-error': newAssetType.errors.has('label')}">
                                {{ Form::label('label', 'Label', ['class' => 'col-md-4 control-label']) }}
                                <div class="col-md-6" >
                                    <input type="test" name="label" v-model="newAssetType.label">

                                    <span class="help-block" v-show="newAssetType.errors.has('label')">
                                        @{{ newAssetType.errors.get('label') }}
                                    </span>

                                </div>
                            </div>
                            <div class="form-group">
                                {{ Form::label('enabled', 'Enabled?', ['class' => 'col-md-4 control-label']) }}
                                <div class="col-md-6">                           
                                    <input type="checkbox" name="enabled" v-model="newAssetType.enabled" >
                                </div>
                            </div>

                            <!-- Submit -->
                            <div class="form-group">
                                <div class="col-md-8 col-md-offset-4">

                                    <button class="btn btn-primary" @click="createType" :disabled="newAssetType.busy">
                                        Create Asset Type
                                    </button>
                                </div>
                            </div>
                            <div id="assignProps" v-if="newAssetType.successful">
                                 <!-- Button trigger modal -->
                                <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
                                    Add Property
                                </button>

                                <!-- Modal -->
                                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                                  <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                      <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                        <h4 class="modal-title" id="myModalLabel">Add New Property to Asset Type</h4>
                                      </div>
                                      <div class="modal-body">

                                            <assign-asset-prop v-for="property in properties" class="panel panel-info property-item">
                                               <div class="panel-heading">@{{ property.label }}</div>
                                                <div class="panel-body"><strong>Input Type: </strong>@{{ property.input_type }}
                                                    <div class="pull-right">
                                                        <input type="hidden" name="prop_id" v-bind:value="property.p_id" v-model="assignPropForm.prop_id">
                                                        <input type="hidden" name="type_id" v-bind:value="property.p_id" v-model="assignPropForm.type_id">

                                                        <button class="btn btn-primary" @click="assignProp" :disabled="assignPropForm.busy">
                                                            Add
                                                        </button>
                                                    </div>

                                                </div>
                                            </assign-asset-prop>

                                      </div>
                                      <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                        <button type="button" class="btn btn-primary">Save changes</button>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</new-asset-type>
@endsection

Don't use v-model on hidden fields; they don't emit changes. You already have a value bound, but it's weird that you're using the same value for both fields. — Roy J
If I remove v-model and only use value, how will I map the inputs to the form object? — cmcg182
It's not entirely clear how you're using the values. It sounds like you want the value-bound variables to initialize the field, but have the v-model-bound variables update them? You need to value-bind the variable you want to be tied to the value. If you have initial values, put them into the bound variable. — Roy J
I'm still trying to wrap my head around data binding in different circumstances. But I'm trying to assign the value of the hidden input with a variable from the v-for (within the view). I was under the impression that I need to initialize the variable within the component data in order to bind the inputs to the form object. I've got rid of v-model, and I'm trying v-bind:propvalue="property.p_id" in my hidden input, and assignPropForm: new SparkForm({ propvalue: null }) in my components' data, but it still doesn't seem to update the propvalue variable from the initial value of null. — cmcg182
If you could make a snippet or a fiddle with a simple-as-possible example of what you're trying to do, and update your question with it, it would help potential answerers a great deal, and it also might give you more clarity. — Roy J

cmcg182 cmcg182 · Accepted Answer · 2017-03-28T19:59:10

Thanks to the helpful comments, I learned that I shouldn't have been using hidden inputs at all. Instead, I simply passed the variables to the function on the click event.

<button class="btn btn-primary" @click="assignProp(type_id, property.p_id)" >
    Add
</button>

Then in my component

methods: {
        assignProp: function (type_id, property_id) {
            var assignPropForm = new SparkForm({
                propvalue: property_id, 
                typevalue: type_id,
            });

            Spark.post('/asset-properties/add', assignPropForm)
                .then(response => { 
                    console.log(response);
                })
                .catch(response => { 
                    console.log("fail");
                });
        }
    }

Can't pass Vue variable to hidden input v-model in view(v-for)

2 Answers