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 相关文章推荐
用JTrackBar实现的模拟苹果风格的滚动条
Aug 06 Javascript
JQuery从头学起第二讲
Jul 04 Javascript
用js来刷新当前页面保留参数的具体实现
Dec 23 Javascript
JavaScript数字和字符串转换示例
Mar 26 Javascript
处理文本部分内容的TextRange对象应用实例
Jul 29 Javascript
jQuery中data()方法用法实例
Dec 27 Javascript
JavaScript中的变量作用域介绍
Dec 31 Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
Apr 25 Javascript
JavaScript html5 canvas画布中删除一个块区域的方法
Jan 26 Javascript
JS实现的在线调色板实例(附demo源码下载)
Mar 01 Javascript
详解获取jq ul第一个li定位的四种解决方案
Nov 23 Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
Apr 26 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
用PHP连mysql和oracle数据库性能比较
2006/10/09 PHP
require(),include(),require_once()和include_once()的异同
2007/01/02 PHP
php判断变量类型常用方法
2012/04/24 PHP
PHP连接操作access数据库实例
2015/03/30 PHP
PHP中配置IIS7实现基本身份验证的方法
2015/09/24 PHP
PHP在同一域名下两个不同的项目做独立登录机制详解
2017/09/22 PHP
javascript时区函数介绍
2012/09/14 Javascript
jquery阻止后续事件只执行第一个事件
2014/07/24 Javascript
在JavaScript中处理时间之getHours()方法的使用
2015/06/10 Javascript
C++中的string类的用法小结
2015/08/07 Javascript
jQuery垂直多级导航菜单代码分享
2015/08/18 Javascript
IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题
2015/08/21 Javascript
Jquery-data的三种用法
2017/04/18 jQuery
js比较两个单独的数组或对象是否相等的实例代码
2019/04/28 Javascript
Vue响应式原理Observer、Dep、Watcher理解
2019/06/06 Javascript
原生js实现随机点名功能
2019/11/05 Javascript
vue.js页面加载执行created,mounted的先后顺序说明
2020/11/07 Javascript
vue-calendar-component 封装多日期选择组件的实例代码
2020/12/04 Vue.js
Python自定义函数的创建、调用和函数的参数详解
2014/03/11 Python
使用Python来编写HTTP服务器的超级指南
2016/02/18 Python
Python中类的初始化特殊方法
2017/12/01 Python
使用Python向DataFrame中指定位置添加一列或多列的方法
2019/01/29 Python
解决pycharm 工具栏Tool中找不到Run manager.py Task的问题
2019/07/01 Python
详解python破解zip文件密码的方法
2020/01/13 Python
Python如何把Spark数据写入ElasticSearch
2020/04/18 Python
Laura Geller官网:美国彩妆品牌
2018/12/29 全球购物
RetroStage德国:复古服装
2019/02/03 全球购物
ECHT官方网站:男女健身服
2020/02/14 全球购物
给实习单位的感谢信
2014/02/01 职场文书
便利店促销方案
2014/02/20 职场文书
骨干教师考核方案
2014/05/09 职场文书
小学模范班主任事迹材料
2014/05/13 职场文书
2016猴年春节问候语
2015/11/11 职场文书
文艺委员竞选稿
2015/11/19 职场文书
Python进度条的使用
2021/05/17 Python
如何利用python实现Simhash算法
2022/06/28 Python