最近在使用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加入群聊,欢迎一起研究技术
转载请注明:vue修改数据axios赋值表单元素undefined问题 出自老鄢博客 | 欢迎分享