vue v-model动态生成详解
程序员文章站
2022-03-21 20:32:48
1.input 输入框 v-model 绑定的字段名需要根据后台返回的数据动态生成,此时就不可以用 v-model绑定,而是用传统的方法 value 动态绑定,并且用子组件...
1.input 输入框 v-model 绑定的字段名需要根据后台返回的数据动态生成,此时就不可以用 v-model绑定,而是用传统的方法 value 动态绑定,并且用子组件绑定向父组件传递值和事件。 代码如下:
//子组件 <template> <input v-if="type === 0" type="text" :value="currentvalue" @change="handleinput"> <textarea v-else :value="currentvalue" @change="handleinput"></textarea> </template> <script> export default { // 接收父组件传递过来的状态(值) props: { type: number, //0 input框 1 文本域 value: string // 值有时候编辑状态也是先要获取值的 类似 v-model }, data() { return { currentvalue: this.value } }, methods: { handleinput(e) { let value = e.target.value if (value === this.currentvalue) { return } else { this.currentvalue = value } this.$emit('input', value) } } } </script>
//父组件 //extendtypes 动态获取过来的扩展字段 需要绑定的model 为item.extendkey <div class="form-group" v-for="item in extendtypes"> <div> <ad-input :value="extendtypesmodel[item.extendkey]" :type="item.type" @input="handleupdate(item.extendkey, $event)"> </ad-input> </div> </div>
// model是动态的,不可以写死,只能在本地先定义一个json extendtypesmodel,在获取过来后台的数据之后,本地赋值为空 this.extendtypesmodel = {} if (res && res.code === 0) { for (let i = 0; i < res.data.length; i++) { this.extendtypesmodel[res.data[i].extendkey] = '' } this.extendtypes = res.data }
//父组件注册的事件 handleupdate(key, value) { this.extendtypesmodel[key] = value }
父子组件通过自定义属性和自定义事件实现通信。
父组件 自定义属性 v-bind 将父的值传给子
子组件通过 props 来接受 父的值,接受后 可以想data 一样直接拿来使用。
子组件内部 通过 $.emit( 父组件方法名,value) 方法向父组件传值,父组件拿到值 并触发父组件的事件了。
这种方式现在看来是个坑啊 因为子组件对数据会有个缓存,每次不是新生成一个 input框,而是看之前有没有生成过,有的话就不生成了,所以数据有个缓存,清除不了 简直换个更简单的方式
<div class="form-group" v-for="(item, index) in extendtypes"> <label class="control-label">{{item.extendname}}</label> // 既不需要用v-model绑定 也不需要用到子组件 将赋值和取值分开来 而不是用 v-model去绑定,这里取值用到 ref <input class="form-control" :value="extendtypesmodel[item.extendkey]" @input="handleupdate(item.extendkey, index)" ref="ipt"> </div> <div class="text-danger" v-if="item.isrequired === 1">*</div> </div>
handleupdate(key, index) { this.extendtypesmodel[key] = this.$refs.ipt[index].value }
ref绑值取值ref给元素或者子组件注册引用信息,绑定在this.ref绑值取值ref给元素或者子组件注册引用信息,绑定在this.refs 上边。如果是v-for 遍历的话,绑定的就是个数组。
一般通过 $ref.name.value 来取值
上一篇: jQuery实现html双向绑定功能示例
下一篇: 浅析vue.js数组的变异方法