Trying to update the model with a simple action. After clicking the button, the data field "message" is changed to display "Good Bye!". However, it quickly reverts back to displaying "Hello Vue.Js!" immediately. How can you modify the value of the model within its own method?
<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!";
}
}
});
});