我正在模型中进行简单的更新。当按钮被点击时。它将更新数据:带有“再见!”的消息它可以工作,但它会恢复到“Hello Vue.Js!”马上。如何在模型自己的方法中更改模型的值?
<div id="CreateUser" class="panel panel-default">
<div class="panel-heading">User Infos</div>
<div class="panel-body">
<label> {{ message }} </label>
<button class="btn btn-default" v-on:click="showAlert">Submit</button>
@{
<form role="form">
<div class="form-group">
@Html.TextBoxFor(m => Model.FirstName, new {id = "FirstName", @class = "form-control", placeholder = "User First Name"})
</div>
<div class="form-group">
@Html.TextBoxFor(m => Model.MiddleName, new {id = "MiddleName", @class = "form-control", placeholder = "User Middle Name"})
</div>
<div class="form-group">
@Html.TextBoxFor(m => Model.LastName, new {id = "LastName", @class = "form-control", placeholder = "User Last Name"})
</div>
<div class="form-group">
@Html.TextBoxFor(m => Model.Email, new {@id = "Email", @class = "form-control", @placeholder = "User Email", @type = "email"})
<p><b>User Email is also the login account.</b>
</p>
</div>
<div class="form-group">
@Html.TextBoxFor(m => Model.Password, new {@id = "Password", @class = "form-control", @placeholder = "User Password", @type = "password"})
</div>
<div class="form-group">
<button class="btn btn-default" v-on:click="showAlert">Submit</button>
<input type="submit" class="btn btn-info" value="Clear"/>
</div>
</form>
}
</div>
</div>
$(document).ready(function() {
var app = new Vue({
el: '#CreateUser',
data: {
message: 'Hello Vue.js!'
},
methods: {
showAlert: function() {
this.message = "Good Bye!";
}
}
});
});
最佳答案
发生这种情况是因为表单已提交,因此您必须防止这种情况发生。可以在事件上使用 .prevent
修饰符
<button class="btn btn-default" v-on:click.prevent="showAlert">Submit</button>
关于javascript - Vuejs如何在模型方法中更新模型数据?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43027481/