vue v-model动态生成详解


Posted in Javascript onJune 30, 2018

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

Javascript 相关文章推荐
一个可绑定数据源的jQuery数据表格插件
Jul 17 Javascript
javascript学习笔记(十九) 节点的操作实现代码
Jun 20 Javascript
jquery ztree实现下拉树形框使用到了json数据
May 14 Javascript
node.js解决获取图片真实文件类型的问题
Dec 20 Javascript
JS往数组中添加项性能分析
Feb 25 Javascript
JavaScript使用replace函数替换字符串的方法
Apr 06 Javascript
前端程序员必须知道的高性能Javascript知识
Aug 24 Javascript
微信小程序访问node.js接口服务器搭建教程
Apr 25 Javascript
Node.js实现连接mysql数据库功能示例
Sep 15 Javascript
在vue里面设置全局变量或数据的方法
Mar 09 Javascript
如何在Vue中抽离接口配置文件
Oct 31 Javascript
JavaScript 中判断变量是否为数字的示例代码
Oct 22 Javascript
vue-router+nginx 非根路径配置方法
Jun 30 #Javascript
Vue项目中添加锁屏功能实现思路
Jun 29 #Javascript
angular6.0开发教程之如何安装angular6.0框架
Jun 29 #Javascript
详解Angular6.0使用路由步骤(共7步)
Jun 29 #Javascript
详解基于Vue-cli搭建的项目如何和后台交互
Jun 29 #Javascript
jQuery实现模糊搜索功能的方法分析
Jun 29 #jQuery
微信小程序中进行地图导航功能的实现方法
Jun 29 #Javascript
You might like
《OVERLORD》第四季,终于等到你!
2020/03/02 日漫
用PHP和ACCESS写聊天室(一)
2006/10/09 PHP
Ajax PHP简单入门教程代码
2008/04/25 PHP
PHP header()函数使用详细(301、404等错误设置)
2013/04/17 PHP
朋友网关于QQ相关的PHP代码(研究QQ的绝佳资料)
2015/01/26 PHP
jquery 查找新建元素代码
2010/07/06 Javascript
jquery 单击li防止重复加载的实现代码
2010/12/24 Javascript
js字符编码函数区别分析
2011/12/28 Javascript
javascript延时加载之defer测试
2012/12/28 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
2013/05/07 Javascript
AngularJS实现表单验证
2015/01/28 Javascript
js实现的二分查找算法实例
2016/01/21 Javascript
jquery组件WebUploader文件上传用法详解
2020/10/23 Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
2017/07/03 Javascript
Angular.js中上传指令ng-upload的基本使用教程
2017/07/30 Javascript
微信小程序scroll-view实现字幕滚动
2018/07/14 Javascript
vue中轮训器的使用
2019/01/27 Javascript
vue+php实现的微博留言功能示例
2019/03/16 Javascript
微信小程序蓝牙连接小票打印机实例代码详解
2019/06/03 Javascript
Nodejs异步流程框架async的方法
2019/06/07 NodeJs
使用python解析xml成对应的html示例分享
2014/04/02 Python
Python内建数据结构详解
2016/02/03 Python
python数据预处理之数据标准化的几种处理方式
2019/07/17 Python
python设置环境变量的作用整理
2020/02/17 Python
python中使用input()函数获取用户输入值方式
2020/05/03 Python
python中PyQuery库用法分享
2021/01/15 Python
Foot Locker德国官方网站:美国运动服和鞋类零售商
2018/11/01 全球购物
蔻驰意大利官网:COACH意大利
2019/01/16 全球购物
新闻学毕业生自荐信
2013/11/15 职场文书
领导检查欢迎词
2014/01/14 职场文书
向雷锋同志学习倡议书
2015/04/27 职场文书
婚姻出轨保证书
2015/05/08 职场文书
在校生证明
2015/06/17 职场文书
学长教您写论文:经验总结
2019/07/09 职场文书
Golang生成Excel文档的方法步骤
2021/06/09 Golang
对讲机知识
2022/04/07 无线电