Question

我是Vue JS的新手，我正在使用Laravel Spark构建应用程序并尝试尽可能多地使用Vue。

我有一个表单，可以简单地添加一个＆＃39;资产类型＆＃39;有一个组件。成功创建资产类型后，将从数据库中获取属性列表并将其设置为“数据”。属性。在我看来（我使用内嵌模板），我有一个＆＃39; v-for＆＃39;为每个属性创建一个表单，该表单具有两个属性id和类型id的隐藏输入，以及一个＆＃34; Add＆＃34;将属性分配给新创建的类型的按钮。

问题：在使用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

Answer 1

感谢有用的评论，我了解到我根本不应该使用隐藏的输入。相反，我只是将变量传递给click事件上的函数。

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

然后在我的组件中

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

Answer 2

您需要在本地data（）dep。中存储变量，并通过getter函数进行设置。

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

2 个答案: