通过接口拿到数据后,input框无法进行编辑
<el-dialog v-dialogDrag title="RPA" :visible.sync="accountVisible" width="30%">
<el-form ref="accountForm" :model="accountForm" :rules="rules" label-width="200px">
<el-form-item label="Channel" prop="channel" placeholder="Bkash">
<el-input v-model="accountForm.channel" clearable></el-input>
</el-form-item>
<el-form-item label="Company Name" prop="companyName">
<el-input v-model="accountForm.companyName" clearable></el-input>
</el-form-item>
<el-form-item label="Account No." prop="accountNo">
<el-input v-model="accountForm.accountNo" clearable></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="accountVisible = false">Cancel</el-button>
<el-button type="primary" @click="saveaAccountEdit">Confirm</el-button>
</span>
</el-dialog>
getAccountInfo() {
this.queryProperties.appCode = this.appCode
this.queryProperties.propertiesList = 'channel,companyName,accountNo'
crud.findProperties(app_url, this.queryProperties).then((res) => {
if (res.code == 0) {
if (res.data != null) {
this.accountForm.channel = res.data.channel
this.accountForm.companyName = res.data.companyName
this.accountForm.accountNo = res.data.accountNo
}
this.accountVisible = true
} else {
this.$message({
message: res.msg,
type: 'error',
duration: 2000,
})
}
})
},
原因:
在Vue实例创建时,obj.b并未声明,因此就没有被Vue转换为响应式的属性,自然就不会触发视图的更新。
解决办法:
这时就需要使用Vue的全局api $set():
$set()方法相当于手动的去把obj.b处理成一个响应式的属性,此时视图也会跟着改变了
这样子就可以了。
遇到同样问题的小伙伴,可以试一下,具体原理搞不明白不重要,试一下就知道了,结果会让你吃惊的。