实现element中tab组件的动态展示，但是对获取到的数据进行操作总是打印__ob__:observer？

  • Z时代
  • 2024-02-09
  • 分类：IT

 <el-tabs>
      <el-tab-pane v-for="(item, index) in allData" :key="index" :label="tabList[index]">
        <tableReuse :datalist="item.data" :titlelist="item.title"></tableReuse>
      </el-tab-pane>
    </el-tabs>
data () {
    return {
      inputContent: '',
      allData: [{}, {}, {}],
      tabList: [],
      timeId: null
    }
  },
 async getAllData () {
      const data = await this.$http.get('http://127.0.0.1:4523/m1/2452239-0-default/api/searchstation')
        .then(response => {
          console.log('当前数据对象：', response.data) // 正常
          return response.data
        })
        .catch(error => {
          console.log(error)
        })
      console.log('数据信息id：' + data.id, '数据信息类型:' + typeof data, data)// Object 数据正常获取
      JSON.parse(JSON.stringify(this.allData.splice(data.id, 1, data))) // 获取到的元素放进数组，形成对象数组 不进行深拷贝出现__ob__:Observer
      console.log('所有数据', JSON.parse(JSON.stringify(this.allData)))
      this.getTabName(this.allData)
    },
    setInterval () {
      this.timeId = setInterval(this.getAllData, 3000)
    },
// 利用该方法获取到title中的station值，然后作为tab-pane的label值
    async getTabName (data) {
      const names = [{}, {}, {}]
      for (let i = 0; i < data.length; i++) {
        names.push(data[i].title)
        console.log('names', names)
        for (let i = 0; i > names.length; i++) {
          this.tabList.push(names[i].station)
        }
      }
      console.log('tablist:', this.tabList)
    }

解决了：删除获取tabs的方法，再获取 数据方法里面：

 this.tabList = JSON.parse(JSON.stringify(this.allData)).map(item => {
        return item.title
      })

在标签里：
:label="tabList[index].station"

回答：

这两个地方改一下：

this.allData.splice(data.id, 1, data);
async getTabName(data) {
  const names = [];
  for (let i = 0; i < data.length; i++) {
    names[i] = data[i].title;
    console.log('names', names);
  }
  for (let i = 0; i < names.length; i++) {
    this.tabList.push(names[i].station);
  }
  console.log('tablist:', this.tabList);
}

以上是 实现element中tab组件的动态展示，但是对获取到的数据进行操作总是打印__ob__:observer？ 的全部内容， 来源链接： utcz.com/p/934894.html

回到顶部