Question

是Vue.js的新手，我想将数据属性值传递给我的模板。

我有：

export default {
  name: "profile",
  data: () => ({
    user:[]
  }),
  mounted() {
    axios
      .get('/api/user')
      .then(function (response) {
        this.user = response
      })
      .catch(function (response) {
        console.error(response);
      });
  }
}

在HTML模板中我有：

<template>
  <div>{{user.name }}</div>
</template>

现在我收到错误

无法设置user
的属性undefined

console.log(response)产生：

名称：“用户1”，//名称存在
电子邮件......

Answer 1

尝试使用arrow function进行axios回调

.then((response) => {
    this.user = response
})

arrow function按预期绑定组件上下文。

Answer 2

在装载中：

mounted() {
    var self = this;
    axios.get('/api/user')
        .then(function (response) {
           self.user = response
        })
        .catch(function (response) {
           console.error(response);
        });
     }
}

在vue js laravel组件中传递数据属性

2 个答案: