3

我是 Vue 的新手，我面临着一些我不太了解的事情：

首先，我从数据库中获取数据以填充我的用户价值。

然后，使用这个用户值的内容，我有一个递归函数，可以从另一个数据库中获取更多数据。

我的问题来自那一刻，我得到了值，（如果我删除/粘贴我的子 UserData 组件的内容，我可以在表中看到好的值）但是如果我刷新或只是正常访问此页面，名字和姓氏缺少值。我认为这与 v-for 不更新有关，但我不确定。

我花了很多时间阅读文档和其他类似的问题，但我还是不明白。

<template lang="pug">
  .wrapper
    Top
    h1 Users
    .table-wrap(v-if='users.length > 0')
      table
        tr
          td(width='150') email
          td(width='150') Type
          td(width='150') Last name
          td(width='150') First name
          td(width='150') Action
        UserData(v-for='user in users' v-bind:user='user' v-bind:key="user.id")
    div(v-else='')
      | There are no users.
</template>

<script>
import UsersService from '@/services/UsersService'
import UserData from '@/components/users/UserData'
import Top from '@/components/head/Top'

export default {
  name: 'users',
  components: {
    UserData,
    Top
  },
  data() {
    return {
      test: '',
      users: [],
      val: 0
    }
  },
  mounted() {
    this.isLogged()
  },
  methods: {
    async isLogged() {
      if (this.$cookie.get('session') === 'null' || this.$cookie.get('session') === null) {
        this.$router.push({ name: 'LoginUser' })
      } else {
        this.fetchUsers()
      }
    },
    async fetchData(val) {
      const res = await UsersService.getUserValues({
        id: this.users[val].extend
      })
      this.users[val].firstname = res.data.firstname
      this.users[val].lastname = res.data.lastname
      this.val = this.val - 1
      if (val > 0) {
        this.fetchData(this.val)
      }
    },
    async fetchUsers() {
      const response = await UsersService.fetchUsers()
      this.users = response.data.results
      this.val = this.users.length
      this.fetchData(this.val - 1)
    }
  }
}
</script>

用户数据组件：

<template lang="pug">
  tr
    td {{ user.email }}
    td {{ user.type }}
    td {{ user.lastname }}
    td {{ user.firstname }}
    td(align='center')
      a(@click='this.value = true') more
</template>

<script>

export default {
  props: ['user']
}

</script>
4

1 回答 1

4

当你通过直接设置索引来修改 Array 时，Vue 无法检测到变化，例如：

this.users[val].firstname = res.data.firstname
this.users[val].lastname = res.data.lastname

但是，Vue 提供了一个方便的方法arr.$set(index, value)，所以试试这个：

...

let temp = this.users[val]
temp.firstname = res.data.firstname
temp.lastname = res.data.lastname

this.users.$set(val, temp)

...
于 2017-11-19T19:17:52.533 回答