Невозможно передать переменную Vue в скрытую входную v-модель в представлении (v-for)

Я новичок в Vue JS, создаю приложение с Laravel Spark и стараюсь максимально использовать Vue.

У меня есть форма, чтобы просто добавить «Тип актива» с компонентом. После успешного создания типа актива список свойств берется из базы данных и устанавливается для атрибута «данные». На мой взгляд (я использую встроенный шаблон), у меня есть 'v-for', который создает форму для каждого свойства с двумя скрытыми входами для идентификатора свойства и идентификатора типа, а также одну кнопку «Добавить», которая назначает свойство к вновь созданному типу.

ПРОБЛЕМА: я не могу присвоить значение скрытых входов в представлении при использовании 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

cmcg182 24.03.2017 источник

comment

Не используйте v-model в скрытых полях; они не испускают изменений. У вас уже есть value привязка, но странно, что вы используете одно и то же значение для обоих полей. - Roy J 24.03.2017

comment

Если я удалю v-модель и буду использовать только значение, как мне сопоставить входные данные с объектом формы? - cmcg182 24.03.2017

comment

Не совсем понятно, как вы используете значения. Похоже, вы хотите, чтобы переменные, привязанные к значению, инициализировали поле, но обновляли ли их переменные, привязанные к v-модели? Вам нужно привязать значение переменной, которую вы хотите привязать к значению. Если у вас есть начальные значения, поместите их в связанную переменную. - Roy J 24.03.2017

comment

Я все еще пытаюсь осмыслить привязку данных в разных обстоятельствах. Но я пытаюсь присвоить значение скрытого ввода переменной из v-for (внутри представления). У меня создалось впечатление, что мне нужно инициализировать переменную в данных компонента, чтобы привязать входные данные к объекту формы. Я избавился от v-модели, и я пытаюсь v-bind:propvalue="property.p_id" в моем скрытом вводе и assignPropForm: new SparkForm({ propvalue: null }) в данных моих компонентов, но, похоже, он по-прежнему не обновляет переменную propvalue с начального значения null. - cmcg182 24.03.2017

comment

Если бы вы могли сделать отрывок или скрипку с максимально простым примером того, что вы пытаетесь сделать, и обновить им свой вопрос, это очень помогло бы потенциальным ответчикам, а также могло бы дать вам больше ясности. . - Roy J 24.03.2017

Ответы (2)

arrow_upward
0
arrow_downward

Благодаря полезным комментариям я узнал, что мне вообще не следовало использовать скрытые входы. Вместо этого я просто передал переменные функции в событии щелчка.

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

cmcg182 28.03.2017

arrow_upward
0
arrow_downward

Вам нужно хранить переменные в локальном хранилище данных () и получать их с помощью функции геттеров.

Max Sherbakov 24.04.2018

Невозможно передать переменную Vue в скрытую входную v-модель в представлении (v-for)

Ответы (2)

Похожие вопросы