vue form綁定數據后只能顯示不能編輯

問題描述：

數據綁定后form上，數據能夠正常顯示，像單選、下拉框等能操作，但是操作后，顯示的值不變，頁面自動更新后才能顯示。

原因分析：

是因為在賦值的時候，沒有在data中聲明屬性，如下面的代碼：

<script>
export default {
  data () {
    return {
      formModel: {}
    }
  },
  methods: {
    processFormData (val) {
      let s = JSON.parse(JSON.stringify(val))
      this.formModel.name = s.name
      this.formModel.pwd = s.pwd
    }
  }
}
</script>

此時，由於沒有聲明'name','pwd'，屬性綁定到form-item上后，只能顯示不能編輯，編輯后更新頁面才會顯示編輯后的內容 。

修改方法

一，修改代碼，如下，在data中聲明屬性

<script>
export default {
  data () {
    return {
      formModel: {
     name: '',
        pwd: ''
      }
    }
  },
  methods: {
    processFormData (val) {
      let s = JSON.parse(JSON.stringify(val))
      this.formModel.name = s.name
      this.formModel.pwd = s.pwd
    }
  }
}
</script>

二、使用this.$set進行賦值

<script>
export default {
  data () {
    return {
      formModel: {}
    }
  },
  methods: {
    processFormData (val) {
      let s = JSON.parse(JSON.stringify(val))
      this.$set(this.formModel, 'name', s.name)
      this.$set(this.formModel, 'pwd', s.pwd)
    }
  }
}
</script>