vue.jsは、V-のために、私はVueのに新たなんだ

Question

を更新し、私が何かに直面していない私は本当に理解していない：

まず、私は私のユーザー値を移入するためにDBからデータを取得しています。

次に、このユーザー値の内容を使用して、別のDBからより多くのデータを取得する再帰関数があります。

私の子供のUserDataコンポーネントのコンテンツを削除/貼り付けてもテーブルの値がわかりますが、このページから正常に表示された場合、 、firstnameとlastnamesの値がありません。私はそれがvと何か関係があると思う。更新しないのだが、わからない。

私はドキュメントやその他の同様の問題を読むのに多くの時間を費やしましたが、それでも私はそれを得ていません。

<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

ヴューは、例えば、変化を検出することができない。

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) 

...