OhPlay/pages/demo/mqtt/deviceInfo.vue

<template>
  <view class="device-info">
    <text v-for="(item,index) in infoList" :key="index" space="ensp" class="t">
      {{item.key}} : {{item.element}}
    </text>

  </view>
</template>

<script>

export default {
  components: {},
  data: () => ({
    index:0,
    list:[]
  }),
  computed: {
    infoList(){
      if(this.$store.state.moduleMqtt.deviceList.length > this.index){
        let object = this.$store.state.moduleMqtt.deviceList[this.index]
        let list = []
        for (const key in object) {
          if (Object.hasOwnProperty.call(object, key)) {
            const element = object[key];
            list.push({
              key,
              element,
            })
          }
        }
        
        return list

      }else{
        return []
      }
    }
  },
  methods: {
    getInfoList(){
      console.log(`getInfoList1 ${this.$store.state.moduleMqtt.deviceList.length} index = ${this.index}` );
      if(this.$store.state.moduleMqtt.deviceList.length > this.index){
        console.log("getInfoList2");
        let object = this.$store.state.moduleMqtt.deviceList[this.index]
        let list = []
        for (const key in object) {
          if (Object.hasOwnProperty.call(object, key)) {
            const element = object[key];
            list.push({
              key:key,
              element:element,
            })
          }
        }
        console.log(list);
        this.list = list

      }

    }
  },
  watch: {},

  // 页面周期函数--监听页面加载
  onLoad(options) {
    // if(options){
    //   this.index = Number.parseInt(options.index)
    // }
    //this.getInfoList()
  },
  // 页面周期函数--监听页面初次渲染完成
  onReady() {},
  // 页面周期函数--监听页面显示(not-nvue)
  onShow() {},
  // 页面周期函数--监听页面隐藏
  onHide() {},
  // 页面周期函数--监听页面卸载
  onUnload() {},
  // 页面处理函数--监听用户下拉动作
  onPullDownRefresh() {
    uni.stopPullDownRefresh();
  },
  // 页面处理函数--监听用户上拉触底
  onReachBottom() {},
  // 页面处理函数--监听页面滚动(not-nvue)
  /* onPageScroll(event) {}, */
  // 页面处理函数--用户点击右上角分享
  /* onShareAppMessage(options) {}, */
};
</script>

<style>
.device-info{
  display: flex;
  flex-direction: column;
}
.t{
  margin: 10rpx;
}
</style>