解决 Vant中 输入框(Field)组件获取不到输入值

简介: 解决 Vant中 输入框(Field)组件获取不到输入值

问题:

Vant框架中输入框field组件绑定的value值不会同步更新到data中定义的的变量上;

解决:

通过绑定对应的事件,并触发该事件来更新data中定义的变量值;

2020062310470442.png

20200623104134875.png

<template>
  <view class="fill-wrap">
    <van-cell-group>
      <van-field  autosize required type="text" placeholder="请输入通过原因" @input="getFieldValue"/>
    </van-cell-group>
  </view>
</template>
<script>
export default {
  data() {
    return {
      fieldValue:'',
    };
  },
  methods: {
    getFieldValue(e){
      console.log(e)
      this.fieldValue = e.detail
    },
  }
}
</script>
相关文章
|
存储 小程序 JavaScript
【微信小程序】-- 表单组件 - picker 实现日期选择器(五十三)
【微信小程序】-- 表单组件 - picker 实现日期选择器(五十三)
iframe 在线预览pdf、word、excel、ppt、txt、图片、视频
iframe 在线预览pdf、word、excel、ppt、txt、图片、视频
|
存储 缓存 移动开发
uinapp的setStorageSync和setStorage的区别
uinapp的setStorageSync和setStorage的区别
|
JavaScript API 索引
js中的reduce()方法 讲解 和实现
`reduce()` 方法对数组元素依次应用一个回调函数,将结果累计并最终返回单一值。语法为 `reduce(callback(accumulator, currentValue, currentIndex, array), initialValue)`。参数包括累计器(初次为初始值或首元素)、当前元素值、索引及数组自身。此方法需返回值供下一轮迭代使用。常见应用场景包括计算数组总和与平均值、统计元素频率、过滤与转换数组内容及去除重复项等。例如,可通过 `reduce()` 快速计算 `[1, 2, 3, 4, 5]` 的总和或对对象属性值求和。此外,还可自定义实现 `reduce()` 方法
3520 1
|
编解码 JavaScript
【vue2】vue2 适配pc端,解决浏览器缩放问题,解决电脑显示设置缩放、分辨率问题
【vue2】vue2 适配pc端,解决浏览器缩放问题,解决电脑显示设置缩放、分辨率问题
1625 1
|
缓存 JavaScript
Vue中的keep-alive是什么意思?以及如何使用
Vue中的keep-alive是什么意思?以及如何使用
485 0
|
JavaScript 前端开发 开发者
|
移动开发 开发框架 JavaScript
在UniApp的H5项目中,生成二维码和扫描二维码的操作处理
在UniApp的H5项目中,生成二维码和扫描二维码的操作处理
|
前端开发 JavaScript 网络安全
request.getSession().getAttribute 获取不到值,获取到的是null
这篇文章讨论了在使用前后端分离架构时,通过AJAX请求进行会话管理时遇到的跨域问题,导致`request.getSession().getAttribute`获取到的值为null。解决办法是设置`withCredentials=true`以允许跨域请求携带cookie,确保请求凭证得以传递。
|
前端开发 容器
css溢出隐藏的五种方法
css溢出隐藏的五种方法