【问题总结（19）】this.xxx与xxx, JSON.stringify([data]),JSON.parse(),_ob _: Observer

报错

[Vue warn]: Error in callback for watcher “propsSymbol”: “Error: Need at least a key or a value or a label (only for OptGroup) for [object Object]”

下面展示一些 报错。

[Vue warn]: Error in callback for watcher "__propsSymbol__": "Error: Need at least a key or a value or a label (only for OptGroup) for [object Object]"

// HTML
 <a-select :options="groupList" style="width: 120px" @change="handleGroupChange"> //groupList里没有读取到value
// js
async getAllList () {
      try {
    
        const catList = await this.getCatList()
        const dogList = await this.getDogList()
        const groupList = await this.getGroupList()
        console.log(groupList, '0009')
        groupList.forEach((element) => {
          if (element === 'cat') {
            this.groupList.push({
              label:'猫',
              value: element,
              children: this.catList
            })
          } else {
            this.groupList.push({
              label:'狗',
              value: element,
              children: this.dogList
            })
          }
        })

分析原因

• ：options = “groupList" 没有读取到groupList里面的value
• groupList在getAllList() 里获取到的值打印出来如上图
• ob: Observe

请教同事

关于this

methods里面的this.xxx 是指的实例即data对象里初始化的xxx
this.xxx是全局的，在其他函数中可以this.xxx引用，某个函数里不带有this的xxx是局部的，

// An highlighted block
 async setData () {
      this.groupList = [] //让置空
      this.classItem = []
      const groupList = await this.getGroupList()
      console.log(groupList, '001')
      const catList = await this.getCatList()
      const dogList = await this.getDogList()
       groupList.forEach((element) => { // 遍历改造原来为['cat','dog']的数组
          if (element === 'cat') {
            this.groupList.push({
              label:'猫',
              value: element,
              children: catList
            })
          } else {
            this.groupList.push({
              label:'狗',
              value: element,
              children: dogList
            })
          }
        })
       /* this.animalType = JSON.parse(JSON.stringify(this.groupList)) */
        console.log(this.groupList, '190')// 这里groupList如果不加this 就是原始的groupList的值，
        // console.log(this.animalType, '456')
    },
....

async getGroupList () {
      const groupObj = await getGroups()
      // console.log(getGroups, '11')
      // console.log(groupObj, '124')
      const groupList = groupObj.result
      console.log(groupList, '222')
      // this.groupList = groupList // ['cat','dog'] 这个相当于把原始的groupList又赋值给了this.groupList,那么之前的this.groupList push进去的值就没有了
     

antd select

options API
类型
array<{value, label, [disabled, key, title]}>
默认值 [ ]

自己搜索博客

Need at least a key or a value or a label (only for OptGroup) for [object Object]"

1.options 添加value
2.

ob: Observe

1.首先我们要把这个数据获取原始数据 JSON.stringify([data]) 变成字符串

然后在用JSON.parse()将数据转换为 JavaScript 对象
3.vue 会对绑定的数据进行监控，这也是vue的最大作用
_ob _: Observer这些数据是vue这个框架对数据设置的监控器，一般都是不可枚举的。