javascript - Vuejs如何在模型方法中更新模型数据？

Question

我正在模型中进行简单的更新。当按钮被点击时。它将更新数据:带有“再见!”的消息它可以工作，但它会恢复到“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!";
                }
            }
        });
    });

Answer 1

发生这种情况是因为表单已提交，因此您必须防止这种情况发生。可以在事件上使用 .prevent 修饰符

<button class="btn btn-default" v-on:click.prevent="showAlert">Submit</button> 

演示:http://jsbin.com/yefexanepe/edit?html,js,output