Vue中v-model Input的值无法修改

项目需求:选择代付对象,其附属信息会在input中显示出来,但附属信息可以修改,然而在开发中,附属信息显示出来了,但并不能修改

附属信息的input绑定的是details的某一属性

el-input(v-model="details.target")

detailsdata内初始定义为{}

data () {
    return {
      details    : {}
    }

在代付对象修改的时候,赋值给details

getTargetDetails (v) {
          this.details.bankCode = v.bankCode
          this.details.bankCard = v.bankCard
          this.details.target = v.payee
          this.details.phone = v.phone
   }

这时候能显示附属信息,但附属信息不能修改

原因

Vue的响应式property必须在初始化的时候声明

所以在定义 details的时候,把相关属性一起写出来才是正确的做法

data () {
    return {
      details    : {
        target  : undefined,
        phone   : undefined,
        bankCode: undefined,
        bankCard: undefined
      }
    }
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。