vue的computed和watch联合使用

比眉伴天荒 2022-01-26 07:15 452阅读 0赞

# 问题 #

说明：这里使用计算属性获取`thirdAllItems`,这个得到的是所有的三级项指标。`thirdCurrentItems`是三级项的当前活动项，用于高亮。本来我还是想使用计算属性，如下代码去设置`thirdCurrentItems`,这个确实可以实现点击一级指标和二级指标的时候高亮联动得到的三级指标的第一项。但是我这里三级之后还有第四级，再单独点击三级指标的时候，计算属性`thirdCurrentItems`的`set`函数就不是那么好写了

thirdCurrentItems: { 
           get: function() { 
             return this.thirdAllItems[0].ItemId
           }
         }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dhYnJpZWxfd2Vp_size_16_color_FFFFFF_t_70]

# 解决 #

`thirdCurrentItems`不写在计算属性了，使用`watch`监控`thirdAllItems`,以实现点击一二级的时候，高亮三级项的首项，在`methods`中的`thirdItemClick`函数设置`this.thirdCurrentItems = id`

methods: { 
        //点击三级标题
        thirdItemClick(id) { 
          console.log(id)
          this.thirdCurrentItems = id
        }
      },
      computed: { 
        // 三级项目录所有的数据
        thirdAllItems: function() { 
          let self = this
          if (this.allData.Items) { 
            return this.allData.Items.filter(function(val) { 
              return val.ParentId == self.secondCurrentItems
            })
          } else { 
            return { }
          }
        }
        // thirdCurrentItems: { 
        // get: function() { 
        // return this.thirdAllItems[0].ItemId
        // }
        // }
      },
      watch: { 
        thirdAllItems: function() { 
          this.thirdCurrentItems=this.thirdAllItems[0].ItemId
        }
      },

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dhYnJpZWxfd2Vp_size_16_color_FFFFFF_t_70]: /images/20220126/12c0309bf0fb4a94b0b2bc9bdbbf921d.png