在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ Vue.js 深度watch (deep = true) 對象屬性,動態(tài)屬性監(jiān)控

Vue.js 深度watch (deep = true) 對象屬性,動態(tài)屬性監(jiān)控不到 - 問題解決,為版本bug

如下代碼, 可以watch到對象的已定義屬性, sn, name。 但從input表單動態(tài)綁定的description無法監(jiān)控到。
就是說,頁面顯示出來的時候,sn, name的變化可以被監(jiān)控到, 但description的變化監(jiān)控不到, 因為在 data() 中的 newBean2沒有聲明這個屬性?
(場景是:想把一個數(shù)據(jù)很多的form復(fù)用為一個組件,因此需要將整個form的數(shù)據(jù)以一個object傳回父組件,通過子組件watch,父組件監(jiān)聽的方式)

問題解決:
問題 vue 版本 2.3.3
直接升級到 2.5.3 就解決了。

<template>
  <div class="wrapper">
    <div><b> TEST PAGE</b></div>
    <el-form :model="newBean2" >
      <el-form-item label="SN"  >
        <el-input v-model="newBean2.sn" ></el-input>
      </el-form-item>
      <el-form-item label="產(chǎn)品"  >
        <el-input v-model="newBean2.name" ></el-input>
      </el-form-item>
      <el-form-item label="描述" >
        <el-input v-model="newBean2.description"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data () {
    return {
      newBean2: {
        sn: '',
        name: ''
      }
    }
  },
  watch: {
    newBean2: {
      handler: function (newVal, oldVal) {
        console.info('value changed ', newVal)
        // this.$emit('e1', newVal)
      },
      deep: true
    }
  }
}
</script>

回答
編輯回答
未命名

copy了你的代碼是可以watch到的,不過貼出來的代碼export default少了個大括號。

2017年6月10日 22:56
編輯回答
不將就

補充說明:
在頁面中'SN'輸入框 輸入 a,可以監(jiān)控到變更;
在頁面中'產(chǎn)品'輸入框 輸入 b,可以監(jiān)控到變更;
在頁面中'描述'輸入框 輸入 c,console沒反應(yīng);
在頁面中'產(chǎn)品'輸入框 輸入 bb,可以監(jiān)控到變更, 且能看到新屬性 description的值為 'c';
但是,在頁面中'描述'輸入框 修改 'c' 為 'cc',console沒反應(yīng), 仍然監(jiān)控不到description 屬性;
頁面
clipboard.png

2017年7月15日 00:09