Vue.js消息成功Axios Javascript

Question

i I want to insert my my in database.axios is perfect and enter data in db but I want a message 'data is entered' for the user -> how it is important to insert the message. thanks

    <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

Add a data object where you will store the message, like:

<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>

And now add it to some place ih your template - {{message}} .