Vue.js消息成功Axios Javascript

时间:2017-12-19 08:38:43

标签: javascript axios

我想插入我的数据库.axios是完美的并在数据库中输入数据但是我想要一条消息'为用户输入数据' - > 插入消息的重要性如何。 谢谢       

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

1 个答案:

答案 0 :(得分:0)

添加要存储邮件的数据对象,例如:

<a href = "#close" class='forum-title' name = "abc" data-toggle="modal" data-target="#usermodal">XYZ</a>

现在将其添加到模板的某个位置 - <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>