vue watch 实时监听当input为空时，按钮变为禁用状态

最新推荐文章于 2024-07-30 11:11:00 发布

原创最新推荐文章于 2024-07-30 11:11:00 发布 · 3.4k 阅读

6 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一个Vue项目的具体实现案例，通过监听数组变化来动态控制按钮的启用与禁用状态。当数组中所有对象的linkUrl字段都有值时，按钮处于启用状态；反之，只要有一个对象的linkUrl为空，则按钮变为禁用状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 <Button
   :disabled="saveDisable"
 >保存
  </Button>

 data() {
    return {
      saveDisable: false, //初始为非禁用状态
      banner: [],
      }
    }

 watch: {
    banner: { //监听banner
      handler: function(newVal, oldVal) {
        this.saveDisable = false 
        for (let i in newVal) {
          if (newVal[i].linkUrl === '') { //如果banner中有任一linkUrl为空，按钮变为禁用状态
            this.saveDisable = true 
          }
        }
      },
      deep: true // watch 的 API 里面，有一个属性：deep ，使用它就可以对数组等嵌套对象进行深度监听
    }
  }