【已解决】uview 输入框点击清除按钮只删除了数据未清空视图层

在点击uview输入框自带的清除内容按钮后清空了数据（校验规则已经校验出数据为空），但是输入框内仍然还保留着输入的视图层数据

<u-input  :placeholder="'请输入'+item.name" v-model="form[item.code]" />

原因：v-model必须要绑定data中初始存在的值

这里我绑定的 form[item.code] 在data中实际上并不存在，我在data中返回的只有：

data() {
    return {
        form: {},
    }
}

而这个 form[item.code] 中的item.code是我通过接口从获取到的，所以无法直接写在data当中。

// 调接口获取res
this.list = res.item_data
for (let item of this.list) {
    // 原来是在此处声明的v-model的绑定变量
    this.form[item.code] = ''
}

解决办法

使用vue自带的this.$set()来改写原来的绑定变量方法：

在JS中操作原本不存在的属性时，使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性

//调接口获取res
this.list = res.item_data
for (let item of this.list){
    //改写方法
    this.$set(this.form, item.code, '')
}

如此一来，相当于在data中初始设置了form里是存在着我需要添加的变量的，点击清空按钮视图层的数据也能正常清空，到这里问题就解决啦。