VUEJS Невозможно использовать данные ответов API в шаблоне. - PullRequest
Новая
       39

VUEJS Невозможно использовать данные ответов API в шаблоне.

0 голосов
/ 26 сентября 2019

Мне нужно заполнить таблицу, используя массив объектов, полученных с помощью вызова 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)
    })
  })
},

ТогдаЯ сохранил его в модуле получения следующим образом: 

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": "systems@dev.it", "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: (...)

ЕСС.Это там, мы можем видеть это.

Внутри смонтированного, если мы сравним код, написанный для пользователя и действий, единственное отличие состоит в том, что я не установил 

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"

для отображения тега ap, если массив действительно пуст, он не отображается.Это тоже не правильно.Я не знаю, могут ли они быть связаны.

Я перепробовал много разных тонких версий кода, но ни одна из них не сработала.

Я знаю, что что-то не хватает (код никогда не ошибается....) ....

Может кто-нибудь просветить меня, пожалуйста?

Спасибо большое.х

1 Ответ

1 голос
/ 26 сентября 2019

Прежде всего, это: 

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"

У вас есть и другие проблемы, хотя они не имеют прямого отношения к пустому массиву.

Как правило, вы не должныиметь data значения для состояния в хранилище (если только вы не берете копии для целей редактирования, что вам не кажется).Вместо этого они должны быть представлены как вычисленные свойства, например: 

computed: {
  currentUser () {
    return this.$store.getters.currentProfile.user
  }
}

В Vuex есть помощник по имени mapGetters, который можно использовать для небольшого сокращения, см. https://vuex.vuejs.org/api/#component-binding-helpers,, хотя некоторые люди предпочитаютЯвность более длинной формы.

Это также немного странно: 

return new Promise((resolve, reject) => {
  getUserActivities(userId).then(response => {

Обычно создание нового обещания рассматривается как запах кода, так как это очень редко необходимо.В этом случае вам, вероятно, следует просто вернуть обещание, возвращенное getUserActivities.Например: 

return getUserActivities(userId).then(response => {

Очевидно, что вам нужно будет внести другие изменения, чтобы приспособить функции resolve и reject, которые больше не доступны.Вместо resolve вы просто вернете соответствующее значение (хотя в вашем случае его, кажется, нет), а для reject вы просто выбросите ошибку.

Я также заметилчто userId в вашем data присваивается type и default.Обратите внимание, что это синтаксис проп и не действителен для data свойств.Это не ошибка, но userId будет просто равен целому объекту, он не будет воспринимать его как объект конфигурации.

...