Vue.jsメッセージの成功Axios Javascript

Question

私は私のデータベースに挿入したいです。データベースは完全であり、dbにデータを入力しますが、ユーザには「データが入力されました」というメッセージが必要です - > 挿入することが重要ですメッセージ。 {{message}} -

<script> 
    import axios from 'axios' 

    export default { 
    name: 'hello', 
    data() { 
     return { 
     msg: 'Welcome to Your Vue.js App', 
     User: { first_name: '', last_name: '', email: '' }, 
     message: '' 
     } 
    }, 
    methods: { 
     addToAPI() { 
     let self = this; 

     let newUser = { 
      first_name: this.User.first_name, 
      last_name: this.User.last_name, 
      email: this.User.email 
     } 

     axios.post('http://localhost:3000/(localaccess)',newUser) 
      .then(response => { 
      self.message = 'Data is entered' 
      }) 
      .catch(error => { 
      self.message = 'Error' 
      }) 
     } 
     } 
    } 

</script> 

そして今、あなたのテンプレートIHいくつかの場所に追加します。 感謝

<form> 

     <div class="well"> 
     <h4> Add User</h4> 
     <div class="form-group"> 
      <label class="pull-left"> First Name </label> 
      <input type="text" class="form-control" placeholder="First Name" v-model="User.first_name"> 
     </div> 
     <div class="form-group"> 
      <label class="pull-left"> Last Name </label> 
      <input type="text" class="form-control" placeholder="Last Namen" v-model="User.last_name"> 
     </div> 
     <div class="form-group"> 
      <label class="pull-left"> Email </label> 
      <input type="text" class="form-control" placeholder="Email " v-model="User.email"> 
     </div> 
     </div> 

     <button type="submit" class="btn btn-large btn-block btn-primary full-width" @click="addToAPI">Submit</button> 
     <button class="btn btn-large btn-block btn-success full-width">Go User</button> 
    </form> 

    </div> 
</template> 
<script> 
    import axios from 'axios' 
    export default { 
     name: 'hello', 
     data() { 
      return { 
       msg: 'Welcome to Your Vue.js App', 
       User: { first_name: '', last_name: '', email: '' } 
      } 
     }, 
     methods: { 
      addToAPI() { 
      let newUser = { 
       first_name: this.User.first_name, 
       last_name: this.User.last_name, 
       email: this.User.email 
      } 
      console.log(newUser) 
      axios.post('http://localhost:3000/(localaccess)',newUser) 
       .then(response => { 
       console.log('success:', response) 
       }) 
       .catch(error => { 
       console.log('error:', error) 
       }) 
      } 
     } 
    } 
</script> 

Answer 1

はあなたのように、メッセージを格納するデータオブジェクトを追加します。