在 Vuejs 中渲染数组答案

【问题标题】：Render Array in Vuejs在 Vuejs 中渲染数组
【发布时间】：2021-03-16 21:24:47
【问题描述】：

我尝试通过 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>

Store 代码正常返回数据，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)
        })
      })
    },

【问题讨论】：

@BoussadjraBrahim 我在上面编辑过，我检查了 VueDevtool，数据在那里，只是没有渲染。
最佳实践是在您的商店中定义一个状态并在操作中的 axios 回调中提交一个突变，然后使用计算属性读取该状态
@BoussadjraBrahim 是的，我试过了，通过计算直接从存储中获取数据，同样的事情发生了
你是如何使用计算属性做到这一点的
@BoussadjraBrahim 我编辑了上面的代码，我可以看到 Devtool 内部的状态变化，但在前端，事情仍然没有改变

标签： arrays vue.js object vuex

【解决方案1】：

尝试改变这个

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

到这里

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

【讨论】：