vue v-model动态生成详解

所属分类: 网络编程 / JavaScript 阅读数: 1198
收藏 0 赞 0 分享

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 来取值

更多精彩内容其他人还在看

js面向对象之公有、私有、静态属性和方法详解

这篇文章主要详细介绍了js面向对象之公有、私有、静态属性和方法,并附上详细的示例,非常的细致全面,这里推荐给大家,有需要的小伙伴可以参考下
收藏 0 赞 0 分享

JavaScript实现的简单幂函数实例

这篇文章主要介绍了JavaScript实现的简单幂函数,实例分析了javascript实现幂运算的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享

JavaScript实现将xml转换成html table表格的方法

这篇文章主要介绍了JavaScript实现将xml转换成html table表格的方法,实例分析了javascript操作XML文件与table表格的技巧,非常具有实用价值,需要的朋友可以参考下
收藏 0 赞 0 分享

JavaScript实现简单图片翻转的方法

这篇文章主要介绍了JavaScript实现简单图片翻转的方法,涉及javascript操作图片与数组的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享

原生js实现移动开发轮播图、相册滑动特效

原生JS实现图片自动轮播缓冲切换特效,很实用流畅的图片轮播特效,在较现代的浏览器上展现的圆角效果,兼容差点的是直角效果,全部原生JS实现,还是很不错的值得大家学习并利用,推荐下载。
收藏 0 赞 0 分享

JavaScript控制网页平滑滚动到指定元素位置的方法

这篇文章主要介绍了JavaScript控制网页平滑滚动到指定元素位置的方法,实例分析了javascript操作页面滚动的技巧,非常具有实用价值,需要的朋友可以参考下
收藏 0 赞 0 分享

完美兼容多浏览器的js判断图片路径代码汇总

本文给大家汇总分享了几种使用javascript实现判断图片路径是否存在的代码,都是平时项目中用到过的,这里总结一下,有需要的小伙伴可以参考下。
收藏 0 赞 0 分享

JavaScript实现为指定对象添加多个事件处理程序的方法

这篇文章主要介绍了JavaScript实现为指定对象添加多个事件处理程序的方法,可实现让指定对象处理多个事件的功能,具有一定参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享

javascript模拟命名空间

JavaScript 没有任何特定语言功能来支持命名空间,但很容易使用对象来模拟命名空间。今天我们就来探讨下这个问题,希望大家能够喜欢。
收藏 0 赞 0 分享

JavaScript中split() 使用方法汇总

本文向大家重点讲解一下Javascript中split函数使用,它可以将一个字符串分割为子字符串,然后将结果作为字符串数组返回,相信本文介绍你对split函数的用法有明确的认识。
收藏 0 赞 0 分享
查看更多