vue修改数据axios赋值表单元素undefined问题-老鄢博客

vue修改数据axios赋值表单元素undefined问题

发布时间：2022-11-16 12:55:03 作者：admin 阅读：1113次

最近在使用vue开发，编辑有两种方式，一种是通过深拷贝取列表的值，一种是当点编辑时调接口来取值

现在说的是第二种情况，当对表单元素赋值时提示undefined

以下为解决办法

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
</head>
<body>
<div id="app">
  <el-form ref="form" label-width="70px">
    <p>用户名：</p>
    <input v-model="user_name" placeholder="">
    <p>密码：</p>
    <input v-model="password" placeholder="">
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="saveAdd">确 定</el-button>
    </div>
  </el-form>
</div>
<script>
new Vue({
  el: '#app',
  data() {
    return {
      user_name: 'guest',
        password: 'guest',
    }
  },
  mounted () {
    // var _this = this
    axios
      .get('http://127.0.0.1:8088/api/v1/admin/login_by_user')
      // .then(function (response) {
      //   console.log(response);
      //   _this.user_name = response.data.user_name;
      //   _this.password = response.data.password;
      // })
      // .then((response) => {
      //   console.log(response);
      //   this.user_name = response.data.user_name;
      //   this.password = response.data.password;
      // })
      .then(response => (
        this.user_name = response.data.user_name,
        this.password = response.data.password
      ))
      .catch(function (error) { // 请求失败处理
        console.log(error);
      });
  },
  methods: {
    saveAdd() {
      axios.post('http://127.0.0.1:8088/api/v1/admin/login_by_user', {
        user_name: this.user_name,
        password: this.password
      })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
    },
  }
})
</script>
</body>
</html>

如有问题，可以QQ搜索群1028468525加入群聊，欢迎一起研究技术

支付宝