Question

我正在尝试从jsonplaceholder API循环遍历一组用户。

这是我的Vue组件：

new Vue({
  el: "#vue-app",
  data: {
    name: "dani",
    thumbnail: '',
    users: []
  },
  beforeMount() {
    axios.get('https://jsonplaceholder.typicode.com/users')
      .then(function (response) {
        this.users = response.data
        console.log("users: ", this.users[0])
      })
      .catch(function (error) {
        console.log(error)
      })
  }
})

这是HTML页面中的vue-app div：

<div id="vue-app">

    <div class="row">

        <div class="col-sm-4" v-for="user in users">
          <div class="card-body">
            <h4 class="card-title">{{ user.name }}</h4>
            <p class="card-text">{{ user.email }}</p>
            <a href="#" class="card-link">Card link</a>
            <a href="#" class="card-link">Another link</a>
          </div>
        </div>

    </div>

  </div>

循环不会拉动并显示任何内容。如何正确加载users数组到v-for？

这是同样的JSFiddle：https://jsfiddle.net/danimvijay/9gupydws/

Answer 1

函数中的

this未定义。在vue生命周期方法中，created，mounted ...，Vue已经为我们绑定了this个实例。但是在axios.get().then(function())中的功能中，this没有约束。

您可能想要

  beforeMount() {
    console.log('Before mount')
    const vm = this
    axios.get('https://jsonplaceholder.typicode.com/users')
      .then(function (response) {
        vm.users = response.data
        console.log("users: ", vm.users[0])
      })
      .catch(function (error) {
        throw error
      })
  }

或者您可以使用es6语法

 beforeMount() {
    console.log('Before mount')
    axios.get('https://jsonplaceholder.typicode.com/users')
      .then((response) => {
        this.users = response.data
        console.log("users: ", this.users[0])
      })
      .catch(function (error) {
        throw error
      })
  }

在箭头函数中，this绑定到词汇上下文，这意味着它与创建的this相同

数组未加载v-for

1 个答案: