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

Posted 2023-02-22

【中文标题】无法将 Vue 变量传递给视图中的隐藏输入 v-model（v-for）

【英文标题】：Can't pass Vue variable to hidden input v-model in view(v-for)

【发布时间】：2017-08-17 16:10:26

【问题描述】：

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

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

问题： 在使用 v-models 时，我似乎无法在视图中分配隐藏输入的值。当我提交其中一个表单时，表单请求数据总是从新的 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

【问题讨论】：

不要在隐藏字段上使用v-model；他们不发出变化。您已经有一个 value 绑定，但奇怪的是您对两个字段使用相同的值。

如果我删除 v-model 并且只使用 value，我将如何将输入映射到表单对象？

您如何使用这些值并不完全清楚。听起来您希望值绑定变量初始化字段，但是 v-model-bound 变量是否更新它们？您需要将要绑定到该值的变量值绑定。如果您有初始值，请将它们放入绑定变量中。

我仍在努力解决不同情况下的数据绑定问题。但我试图用来自 v-for 的变量（在视图内）分配隐藏输入的值。我的印象是我需要在组件数据中初始化变量，以便将输入绑定到表单对象。我已经摆脱了 v-model，我在我的隐藏输入中尝试 v-bind:propvalue="property.p_id"，在我的组件数据中尝试 assignPropForm: new SparkForm( propvalue: null )，但它似乎仍然没有从初始更新 propvalue 变量null 的值。

如果你可以用一个尽可能简单的例子来做一个 sn-p 或小提琴，并用它来更新你的问题，这将有助于潜在的回答者交易，它也可能让你更清楚。

【参考方案1】：

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

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

【参考方案2】：

您需要将变量存储在本地 data() 部门，并通过 getters 函数获取。