代码之家  ›  专栏  ›  技术社区  ›  drake035

附加到watch的代码:{}从不执行,尽管watched变量确实发生了更改

  •  0
  • drake035  · 技术社区  · 5 年前

    我好像看不到我的变量 form.ac_all ,我知道随着时间的推移确实会发生变化:

    data () {
        return {
            form: {
                ac_all: false
            }
        } 
    },
    watch: {
        form: {
            ac_all () {
            console.log(form.ac_all)
            }
        }
    }
    

    因为变量是嵌套的,所以我尝试使用 deep 以防万一的选择,无济于事:

    data () {
        return {
            form: {
                ac_all: false
            }
        } 
    },
    watch: {
        form: {
            ac_all: {
                handler () {
                    console.log(form.ac_all)
                },
                deep: true
            }
        }
    }
    

    知道为什么不行吗?

    2 回复  |  直到 5 年前
        1
  •  1
  •   rcbgalido    5 年前

    你必须这样做:

    new Vue({
      el: '#app',
      data() {
        return {
            form: {
                ac_all: false
            }
        }
      },
      watch: {
        'form.ac_all'() {
            console.log('form.ac_all value is ' + this.form.ac_all)
        }
      }
    
    })
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
    <div id="app">
      <button @click="form.ac_all = !form.ac_all">Toggle</button>
    </div>
        2
  •  0
  •   ljcordero    5 年前
    data () {
        return {
            form: {
                ac_all: false
            }
        } 
    },
    watch: {
        form.ac_all: () => {
            console.log(form.ac_all)
        }
    }