Vue 使用axios无法使用data属性接收数据

错误例子:

data() {
			return {
				title: '生命周期',
				cera: '',
				money: 1 * 5 * 6 * 4,
//listuser用于接收axios返回的数据
				listuser:'',
				}

	methods: {
			selectUser() {
				this.$axios.get('/api/ListUser')
					.then(function(response) {
						console.log("log=", response);
						this.listuser=response.data
					})
					.catch(function(error) {
					});
			}
		}

  当你这样在axios中使用this.listuser的时候,会提示没有定义listuser

原因:

          在像data和的选项函数中methods，vue绑定this到我们的视图模型实例，所以我们可以使用this.contas，但在函数里面then，this没有绑定。

解决方法1:

methods: {
            var slef=this
			selectUser() {
				this.$axios.get('/api/ListUser')
					.then(function(response) {
						console.log("log=", response);
						slef.listuser=response.data
					})
					.catch(function(error) {
					});
			}
		}

      在axios中 then里边是this不出来data属性的,所以你需要在外边定义一个this,这个时候再用你自己定义的this就可以了

解决方法2:

methods: {
			selectUser() {
				this.$axios.get('/api/ListUser')
					.then((response)=> {
						console.log("log=", response);
						this.listuser=response.data
					})
					.catch(function(error) {
					});
			}
		}

如果你的目标是支持现代浏览器（或使用像babel这样的转换器），您可以使用ES6标准中的箭头功能 这样也是可以获取到data属性的