我有一个VueJS组件，它通过ajax填充表，而不是在组件内部有一个模式表单，它在表中创建新条目。
关于模态隐藏我想更新表格以显示新条目。
export default {
created() {
axios.get('/api/v1/customers')
.then(response => {
this.customers = response.data;
});
},
methods: {
store() {
this.form.errors = [];
axios.post('/api/v1/customers', this.form)
.then(response => {
this.form.name = '';
this.form.scopes = [];
this.form.errors = [];
$('#modal-edit-client').modal('hide');
this.$forceUpdate();
})
.catch(error => {
console.log(error)
/*if (typeof error.response.data === 'object') {
this.form.errors = _.flatten(_.toArray(error.response.data));
} else {
this.form.errors = ['Something went wrong. Please try again.'];
}*/
});
},
newUser: function () {
$('#modal-edit-client').modal('show');
},
edit: function () {
alert('edit modal')
}
},
data() {
return {
customers: {},
alert: {
show: false,
type: null,
title: null,
message: null,
},
form: {
scopes: [],
errors: []
}
};
}
}
我尝试使用$forceUpdate()，但似乎无法正常工作
输出模板
<template>
<div class="row" v-cloak>
<div class="col-md-12 ">
<div class="panel panel-default custom-panel">
<div class="panel-heading">
<strong>Customers</strong>
<div id="custom-search-input">
<div class="input-group col-md-12">
<input v-on:keyup.enter="filter" type="text" class="form-control input-sm" placeholder="Search Customer" />
<span class="input-group-btn">
<button class="btn btn-info btn-lg" type="button">
<i class="glyphicon glyphicon-search"></i>
</button>
</span>
</div>
</div>
<a class="btn icon-btn btn-success" id="new__item" href="#" @click="newUser">
<span class="glyphicon btn-glyphicon glyphicon-plus img-circle text-success"></span> Add Customer
</a>
</div>
<div class="panel-body">
<table class="table table-condensed">
<tbody>
<tr>
<th style="width: 10px">#</th>
<th>Firma</th>
<th>Strasse</th>
<th>PLZ</th>
<th>Ort</th>
<th>Tel</th>
<th>Status</th>
<th>Actions</th>
</tr>
<tr v-for="customer in customers">
<td>{{ customer.id }}</td>
<td>{{ customer.customer_name }}</td>
<td>{{ customer.customer_street }}</td>
<td>{{ customer.customer_plz }}</td>
<td>{{ customer.customer_city }}</td>
<td>{{ customer.customer_telephone }}</td>
<td><span class="badge bg-green"><i class="fa fa-check"></i></span></td>
<td class="actions">
<a href=""><i class="fa fa-pencil"></i></a>
<a href=""><i class="fa fa-trash"></i></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Edit Client Modal -->
<div class="modal fade" id="modal-edit-client" tabindex="-1" role="dialog">
<div class="spinner"></div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button " class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">
Add Customer
</h4>
</div>
<div class="modal-body">
<!-- Form Errors -->
<!--<div class="alert alert-danger" v-if="alert" >
<p><strong>Whoops!</strong> Something went wrong!</p>
<br>
</div>-->
<!-- Edit Client Form -->
<form class="form-horizontal" id="modal-create-customer" role="form" method="POST" action="">
<div class="row">
<div class="col-xs-12">
<label for="customer_name" class="control-label">Firmenbezeichnung</label>
<input id="customer_name" type="text" class="form-control" v-model="form.customer_name" name="customer_name" value="" required autofocus>
<span class="help-block">
<strong></strong>
</span>
</div>
<div class="col-xs-6">
<label for="sex" class="control-label">Anrede</label>
<select v-model="form.customer_contact_sex" name="title" id="sex" class="form-control">
<option value="Herr">Herr</option>
<option value="Frau">Frau</option>
</select>
<span class="help-block">
<strong></strong>
</span>
</div>
<div class="col-xs-6">
<label for="title" class="control-label">Title</label>
<select v-model="form.customer_contact_title" name="title" id="title" class="form-control">
<option value="">No title</option>
<option value="Dr.">Dr.</option>
<option value="Prof.">Prof.</option>
</select>
<span class="help-block">
<strong></strong>
</span>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<label for="name" class="control-label">First Name</label>
<input id="name" type="text" class="form-control" v-model="form.customer_first_name" name="customer_name" value="" required autofocus>
<span class="help-block">
<strong></strong>
</span>
</div>
<div class="col-xs-6">
<label for="email" class="control-label">Last Name</label>
<input id="email" type="text" class="form-control" v-model="form.customer_last_name" name="customer_last_name" value="" required>
<span class="help-block">
<strong></strong>
</span>
</div>
<div class="col-xs-6">
<label for="street" class="control-label">Street</label>
<input id="street" type="text" class="form-control" v-model="form.customer_street" name="customer_street" value="" required>
<span class="help-block">
<strong></strong>
</span>
</div>
<div class="col-xs-2">
<label for="plz" class="control-label">PLZ</label>
<input id="plz" type="text" class="form-control" v-model="form.customer_plz" name="customer_plz" value="" required>
<span class="help-block">
<strong></strong>
</span>
</div>
<div class="col-xs-4">
<label for="city" class="control-label">City</label>
<input id="city" type="text" class="form-control" v-model="form.customer_city" name="customer_city" value="" required>
<span class="help-block">
<strong></strong>
</span>
</div>
<div class="col-xs-6">
<label for="customer_telephone" class="control-label">Tel.</label>
<input id="customer_telephone" type="text" class="form-control" v-model="form.customer_telephone" name="customer_telephone" value="" required>
<span class="help-block">
<strong></strong>
</span>
</div>
<div class="col-xs-6">
<label for="customer_fax" class="control-label">Fax.</label>
<input id="customer_fax" type="text" class="form-control" name="customer_fax" value="" required>
<span class="help-block">
<strong></strong>
</span>
</div>
<div class="col-xs-6">
<label for="customer_mobile" class="control-label">Mobil</label>
<input id="customer_mobile" type="text" class="form-control" name="customer_mobile" value="" required>
<span class="help-block">
<strong></strong>
</span>
</div>
<div class="col-xs-6">
<label for="customer_email" class="control-label">E-Mail.</label>
<input id="customer_email" type="text" class="form-control" name="customer_email" value="" required>
<span class="help-block">
<strong></strong>
</span>
</div>
<div class="col-xs-12">
<label for="customer_note" class="control-label">Notiz</label>
<textarea name="csutomer_note" id="customer_note" class="form-control"></textarea>
<span class="help-block">
<strong></strong>
</span>
</div>
</div>
</form>
</div>
<!-- Modal Actions -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" @click="store">
Register
</button>
</div>
</div>
</div>
</div>
</div>
</template>
答案 0 :(得分：4)
如评论中所述，您的代码看起来很好，除非您实际上没有用任何内容更新customers属性。
当您使用Axios执行XHR请求时，您需要使用响应来填充组件，这将自动更新相关的DOM。
以下是您应修改的代码的相关部分：
axios.post('/api/v1/customers', this.form)
.then(response => {
this.form.name = '';
this.form.scopes = [];
this.form.errors = [];
// Set the component's customers property to what you get
// in the response
this.customers = response.data.customers;
$('#modal-edit-client').modal('hide');
// You don't need to forceUpdate as Vue will take care of
// rerendering the relevant parts of the DOM
// this.$forceUpdate();
})
另外，考虑到您期望一组客户呈现表格，您应该相应地设置customers默认值：
data() {
return {
customers: []
// ...
};
}