VUEJS无法在模板中使用api响应数据

Question

我需要使用api调用（axios）获得的对象数组填充表。这部分工作正常。在商店模块（activity.js）中，我声明了数组：

currentUserActivities: [],

在突变中：

SET_CURRENT_USER_ACTIVITIES: (state, currentUserActivities) => {
  state.currentUserActivities = currentUserActivities
},

在动作中：

setCurrentUserActivities({ commit }, userId) {
  return new Promise((resolve, reject) => {
    getUserActivities(userId).then(response => {
      const currentUserActivities = response.results
      commit('SET_CURRENT_USER_ACTIVITIES', currentUserActivities)
      console.log('response current user activities: ', response.results)
      resolve()
    }).catch(error => {
      console.log('Error setting single user activities: ', error)
      reject(error)
    })
  })
},

然后我将其保存在getters模块中，如下所示：

currentUserActivities: state => state.activity.currentUserActivities,

在Vue页面中，脚本的相关部分：

data() {
  return {
    currentUser: {},
    userId: {
      type: Number,
      default: function() {
        return {}
      }
    },   
    currentUserActivities: [],
  }
 },
 mounted() {
   const userId = this.$route.params.userId
   this.$store.dispatch('user/setCurrentProfile', userId).then(() => {
     const currentUser = this.$store.getters.currentProfile.user
     this.currentUser = currentUser
     console.log('user mounted user', currentUser)
     this.$store.dispatch('activity/setCurrentUserActivities', userId).then(() => {
       const currentUserActivities = this.$store.getters.currentUserActivities
       console.log('activities on mounted', currentUserActivities)
     })
   }) 
 },

如我所说，在模板部分中，我将有一个表数据。现在让我们忘记它，我只是想让数组原始显示，如下所示：

<div>
<p v-if="currentUserActivities.length = 0">
   This user has no activities yet.
</p>
<p>CURRENT ACTIVITIES: {{ currentUserActivities }}</p>
<p>CURRENT USER: {{ currentUser }}</p>
</div>

当前用户显示良好，在浏览器中我可以看到：

CURRENT USER: { "id": 1, "last_login": "20/09/2019 09:42:15", "is_superuser": false, "username": "admin", "first_name": "System", "last_name": "Dev", "email": "[email protected]", "is_staff": true, "is_active": false, "date_joined": "30/08/2019 09:03:40" }

代替当前的用户活动数组：

CURRENT ACTIVITIES: []

在控制台中，我拥有两者，让用户保持良好，当前用户活动数组为：

activities on mounted: 
0: {...}
1: {…}
2:
activity: (...)
arrival_point: "SRID=4326;POINT (0 0)"
burns_calories: false
co2: "0.00"
co2_production: (...)
cost: (...)
created: (...)
default_cost: (...)
end: (...)

ECC。在那里，我们可以看到它。

在装入的内部，如果我们将为用户和活动编写的代码进行比较，唯一的区别是我没有设置

this.currentUserActivities = currentUserActivities

如果这样做，我也会在控制台中丢失数据（在屏幕上，它仍为空数组）。在控制台中，我将具有：

activities on mounted: (5) [{…}, {…}, {…}, {…}, {…}, __ob__: Observer]
  1. length: 0
  2. __ob__: Observer {value: Array(0), dep: Dep, vmCount: 0}
  3. __proto__: Array

也即使我设置了

v-if="currentUserActivities.length = 0"

要在数组确实为空的情况下显示p标签，则不会显示它。这也不对。我不知道它们是否可以关联。

我尝试了许多微妙的不同版本的代码，但没有一个起作用。

我知道我错过了一些东西（代码永远不会出错。...）...。

有人可以启发我吗？

非常感谢。X

Answer 1

首先，这：

this.$store.dispatch('activity/setCurrentUserActivities', userId).then(() => {
  const currentUserActivities = this.$store.getters.currentUserActivities
  console.log('activities on mounted', currentUserActivities)
})

正如您在问题中所指出的，您没有将currentUserActivities分配给任何内容。应该是这样的：

this.$store.dispatch('activity/setCurrentUserActivities', userId).then(() => {
  const currentUserActivities = this.$store.getters.currentUserActivities
  this.currentUserActivities = currentUserActivities
  console.log('activities on mounted', currentUserActivities)
})

我知道您在问题中提到了这一点，但事实仍然是正确的。

数组显示为空的原因是因为：

v-if="currentUserActivities.length = 0"

请注意，您将length设置为0，而不是将其与0进行比较。应该是：

v-if="currentUserActivities.length === 0"