Question

我是Vue的新手，我面对的是一些我不太懂的东西：

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

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

我的问题来自那一刻，我得到了值，（如果我删除/粘贴我的子UserData组件的内容，我可以在表中看到好的值），但如果我刷新或只是正常来到这个页面，缺少firstname和lastnames值。我认为这与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>

UserData组件：

<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>

Answer 1

通过直接设置索引来修改数组时，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)

...

vue.js v-for not updating

1 个答案: