Блог

Главная - Вопросы по программированию - Визуализация массива в Vuejs

Визуализация массива в Vuejs

#arrays #vue.js #object #vuex

#массивы #vue.js #объект #vuex

Вопрос:

Я попытался отобразить список элементов с помощью Vuejs, приведенный ниже код является его упрощенной версией. В принципе, мне это нужно для отображения данных, состояние и данные отображаются в VueDevTool, но не на странице.

     <template>
      <div>
        <h1>{{this.sendersList.length}}</h1> <!-- 0 -->
        <h1>{{senders.length}}</h1> <!-- 0 -->
      </div>
    </template>
    
    <script>
      export default{
        data () {
          return {
            sendersList: []
          }
        },
        created () {
          this.$store.dispatch('getAllSenders', {
              app_id: this.$route.params.chat_id
            }).then(response => {
              this.sendersList = response
          })
    
        },
        computed: {
           senders(){
             return this.$store.getters.getAllSenders
           }
        }
      }
    </script>

Данные внутри VueDevTool

Код хранилища возвращает данные как обычно, VueDevtool может их видеть, но я не могу найти способ отрисовки их во внешнем интерфейсе

 getAllMessages(context, data){
      return new Promise((resolve, reject) => {
        axios.post('messages/getAllMessages', {
          sender_id: data.sender_id
        }).then(response => {
          let payload = []
          for (let index = 0; index < response.data.length; index  ) {
            payload.push({
              message_id: response.data[index].message_id,
              message_content: response.data[index].message_content,
              message_type: response.data[index].message_type,
              message_sentiment: response.data[index].message_sentiment,
              sender_id: response.data[index].sender_id,
              user_id: response.data[index].user_id,
              from_sender: response.data[index].from_sender,
              created_date: response.data[index].created_date,
            })
          }
          context.commit('getAllMessages', payload)
          resolve(payload)
        }).catch(error => {
          reject(error)
        })
      })
    },

Комментарии:

1. @BoussadjraBrahim Я отредактировал выше, я проверяю VueDevtool, данные есть, они просто не отображаются.

2. лучше всего определить состояние в вашем хранилище и зафиксировать мутацию внутри обратного вызова axios в действии, а затем прочитать это состояние с помощью вычисляемого свойства

3. @BoussadjraBrahim Да, я пробовал, получал данные непосредственно из хранилища путем вычисления, произошло то же самое

4. Как вы это сделали, используя вычисляемое свойство

5. @BoussadjraBrahim Я отредактировал код, как указано выше, я вижу изменение состояния внутри Devtool, но во внешнем интерфейсе все остается без изменений

Ответ №1:

Попробуйте изменить это

 <h1>{{this.sendersList.length}}</h1>

Для этого

 <h1>{{sendersList.length}}</h1>