视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
关于vuev-model动态生成的介绍
2020-11-27 19:34:38 责编:小采
文档


本篇文章给大家分享了vue v-model动态生成的相关知识点以及实例代码,有兴趣的朋友参考学习下。

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

<p class="form-group" v-for="item in extendTypes">
 <p>
 <ad-input :value="extendTypesModel[item.extendKey]" :type="item.type" @input="handleUpdate(item.extendKey, $event)">
 </ad-input>
 </p>
</p>
// 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框,而是看之前有没有生成过,有的话就不生成了,所以数据有个缓存,清除不了 简直换个更简单的方式

<p 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">
 </p>
 <p class="text-danger" v-if="item.isRequired === 1">*</p>
</p>
handleUpdate(key, index) {
 this.extendTypesModel[key] = this.$refs.ipt[index].value
}

ref绑值取值ref给元素或者子组件注册引用信息,绑定在this.ref绑值取值ref给元素或者子组件注册引用信息,绑定在this.refs 上边。如果是v-for 遍历的话,绑定的就是个数组。

一般通过 $ref.name.value 来取值

下载本文
显示全文
专题