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中聲明屬性，使用this.$set進行賦值

<script>
export default {
  data () {
    return {
      formModel: {
        name: '',
        pwd: ''
      }
    }
  },
  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>