Vuejs 모델의 메서드에서 모델의 데이터를 어떻게 업데이트합니까?

모델에서 간단한 업데이트를 수행하고 있습니다. 버튼을 클릭하면 그것은 데이터를 업데이트 할 것입니다 : "Good Bye!"메시지. 작동하지만 다시 "Hello Vue.Js!"로 되돌아갑니다. 곧. 자체적 인 방법으로 모델의 가치를 어떻게 변경합니까?Vuejs 모델의 메서드에서 모델의 데이터를 어떻게 업데이트합니까?

<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!"; 
       } 
      } 
     }); 
    });

출처

2017-03-26 Jack

@jack 안녕, 할 페이지를 다시로드 할 때 다시 변경된다는 의미입니까? – thisiskelvin

그것은 코드와 함께 잘 작동하기 때문에 : https://jsfiddle.net/qq29gs2q/ – Hammerbot

나는 그것을 양식으로 감싸고 그 원인이 aspnet mvc 컨트롤러의 행동으로 가야하지만 어떻게 될 수 있기 때문에 나는 아무것도 가지고 있지 않다. 컨트롤러의 동작으로 이동하라는 javascript 나 beginform을 사용하지 않았습니다. – Jack

양식이 제출되기 때문에이 없군 방지 할 수 있도록 그것은, 무슨 일이 일어나고 이벤트에 사용할 수있는 .prevent 수정입니다

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

데모 : http://jsbin.com/yefexanepe/edit?html,js,output

출처

2017-03-26 12:36:47

Vuejs 모델의 메서드에서 모델의 데이터를 어떻게 업데이트합니까?

답변

관련 문제