vue form绑定数据后只能显示不能编辑

Z时代
2024-01-10
分类：综合

vue

问题描述：

数据绑定后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>