在我的Laravel 5.3应用程序中，我有一个模态组件，当用户单击按钮编辑数据时显示。
模式窗口的加载是通过以下代码完成的:
<a
href="#"
class="btn btn-sm btn-info"
data-toggle="modal"
data-target="#editCountryModal"
data-country-id="{{ countries['id'] }}"
data-country-code="{{ countries['code'] }}"
data-country-name="{{ countries['name'] }}"
data-country-currency-code="{{ countries['currency_code'] }}"
data-country-currency-name="{{ countries['currency_name'] }}"
data-country-display="{{ countries['display'] }}"
>
<i class="fa fa-lg fa-pencil"></i>
</a>
上面的代码加载了下面的表单，它位于一个模态组件中。
<template>
<div class="errors"></div>
<form method="POST" @submit.prevent="updateCountry">
<div class="form-group">
<label for="name">Id:</label>
<input
type="text"
name="id"
id="countryId"
class="inputText"
autofocus="autofocus"
placeholder="1"
readonly="readonly"
v-model="formData.countryId"
/>
</div>
<div class="form-group">
<label for="name">Name:</label>
<input
type="text"
name="name"
id="name"
class="inputText"
placeholder="Eg. India"
required="required"
v-model="formData.name"
/>
<div class="error">
<span v-if="formErrors['name']"
class="text-danger"
>
{{ formErrors['name'] }}
</span>
</div>
</div>
<div class="form-group">
<label for="code">Code:</label>
<input
type="text"
name="code"
id="code"
class="inputText"
placeholder="Eg. IND"
required="required"
v-model="formData.code"
/>
<div class="error">
<span v-if="formErrors['code']"
class="text-danger"
>
{{ formErrors['code'] }}
</span>
</div>
</div>
<div class="form-group">
<label for="currency_name">Currency Name:</label>
<input
type="text"
name="currency_name"
id="currency_name"
class="inputText"
placeholder="Eg. Indian National Rupee"
required="required"
v-model="formData.currency_name"
/>
<div class="error">
<span v-if="formErrors['currency_name']"
class="text-danger"
>
{{ formErrors['currency_name'] }}
</span>
</div>
</div>
<div class="form-group">
<label for="currency_code">Currency Code:</label>
<input
type="text"
name="currency_code"
id="currency_code"
class="inputText"
placeholder="Eg. INR"
required="required"
v-model="formData.currency_code"
/>
<div class="error">
<span v-if="formErrors['currency_code']"
class="text-danger"
>
{{ formErrors['currency_code'] }}
</span>
</div>
</div>
<div class="form-group">
<label for="display">Display:</label>
<select name="display"
id="display"
class="selectText"
required="required"
v-model="formData.display"
>
<option value="Disabled" selected="selected">Disabled</option>
<option value="Enabled">Enabled</option>
</select>
<div class="error">
<span v-if="formErrors['display']"
class="text-danger"
>
{{ formErrors['display'] }}
</span>
</div>
</div>
<button type="submit" class="button button--teal">Edit</button>
</form>
</template>
<script>
export default {
data() {
return {
formData: {
countryId: '',
name: '',
code: '',
currency_name: '',
currency_code: '',
display: ''
},
formErrors: {},
allCountries: []
}
},
ready: function() {
this.fetchAllCountries();
},
methods: {
notify: function(mType, mTitle, mMessage, nDelay) {
$.iGrowl({
type: mType == 'success' ? 'success' : 'error',
title: mTitle,
message: mMessage,
icon: mType == 'success' ? 'steadysets-checkmark !' : 'feather-cross',
delay: nDelay,
animShow: 'bounceInRight',
animHide: 'bounceOutRight'
});
},
fetchAllCountries: function() {
$.get('/api/all-countries', function(countries) {
this.allCountries = countries;
}.bind(this), 'json');
},
updateCountry: function(e) {
$('.button').addClass('button--disabled')
.html('<i class="fa fa-spinner fa-spin"></i> Editing...');
$(document).find('i.fa.fa-spinner.fa-spin').show();
this.$http
.post('/admin/settings/update-country/' + this.formData.countryId, this.formData)
.then((result) => {
var res = result.data;
$('.button').removeClass('button--disabled').html('Edit');
$(document).find('i.fa.fa-spinner.fa-spin').hide();
// 3000 is the number of seconds before disappearing
this.notify(res.status, res.title, res.message, 3000);
},
(err) => {
$('.button').removeClass('button--disabled').html('Edit');
$(document).find('i.fa.fa-spinner.fa-spin').hide();
if ( err.status === 422 ) {
var errors = err.data;
this.formErrors = errors;
}
});
return false;
}
}
}
</script>
发生的事情是，每当我提交上述表单时，它被提交时根本没有任何值。这意味着我得到了上面所有字段的空字符串。但是，如果我手动进入每个字段，它会以适当的字段值提交。
我希望每当用户单击提交按钮时，值都应该得到更新。这意味着用户不应该被迫点击每个字段，以便我们可以识别它。
编辑1:
我是这样调用模态的:
@section('pageScripts')
<script>
$('#editCountryModal').on('show.bs.modal', function(e) {
var link = $(e.relatedTarget);
var id = link.data('country-id');
var name = link.data('country-name');
var code = link.data('country-code');
var currency_name = link.data('country-currency-name');
var currency_code = link.data('country-currency-code');
var display = link.data('country-display');
var modal = $(this);
modal.find('.modal-title').html('Edit Country: ' + name);
modal.find('.modal-body #countryId').val(id);
modal.find('.modal-body #name').val(name);
modal.find('.modal-body #code').val(code);
modal.find('.modal-body #currency_name').val(currency_name);
modal.find('.modal-body #currency_code').val(currency_code);
modal.find('.modal-body #display').val(display);
});
</script>
@endsection
底线问题:如果用户只是点击提交按钮，我如何提交表单的默认值(加载在模态窗口中)?
非常感谢任何帮助。谢谢。
您正在使用Jquery和Vue的组合，这可能会导致兼容性问题，因为Jquery无法访问Vue内部对象结构。正如Sam所说，VueStrap将是一个寻找重构的好地方。
另一种选择是存储Vue根并使用$broadcast向表单发送事件，该事件将数据传播到模型，而不是设置dom对象的值。
@section('pageScripts')
<script>
$('#editCountryModal').on('show.bs.modal', function(e) {
var object = {
countryId: link.data('country-id'),
name: link.data('country-name'),
code: link.data('country-code'),
currency_name: link.data('country-currency-name'),
currency_code: link.data('country-currency-code'),
display: link.data('country-display')
};
window.Vm.$broadcast('fillModal', object);
});
</script>
@endsection
其中window.Vm是全局存储的根节点所以你的初始化值是window.Vm = new Vue({...})
和你的组件结构看起来像这样:
<script>
export default {
data() {
return {
formData: {
countryId: '',
name: '',
code: '',
currency_name: '',
currency_code: '',
display: ''
},...
}
},
ready: function() {...},
methods: {...},
events: {
"fillModal": function(object){
this.formData = object;
}
}
}
</script>