无法将Vue变量传递给视图中的隐藏输入v模型（v-for）

我是Vue JS的新手，我正在用Laravel Spark构建一个应用程序，并试图尽可能地利用Vue .

我有一个表单只需添加一个组件的'资产类型' . 成功创建资产类型后，将从数据库中获取属性列表并将其设置为“数据”属性 . 在我看来（我使用的是内联模板），我有一个'v-for'为每个属性创建一个表单，该表单有两个隐藏的输入用于属性id和类型id，还有一个“Add”按钮用于指定属性为新创建的类型 .

问题：在使用v模型时，我似乎无法在视图中分配隐藏输入的值 . 当我提交其中一个表单时，表单请求数据总是从新的SparkForm对象返回初始数据值 .

换句话说，我需要在视图中的v-for循环中分配隐藏的输入值 .

这是我的组件：

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");
            });
    }
}

}）;

这是我的看法：

@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