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>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章