解决 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>
相关文章
|
Web App开发 iOS开发
a标签实现文件流下载
a标签实现文件流下载
788 0
|
存储 JSON 资源调度
10分钟带你从0到1搭建monorepo 工程化项目(一)
前言 大家好,我是Fly哥, 之前写博客的仓库,还是用的原生的html 和js 也没有引入 ts , 和一些工程化的东西, 所以自己重新搭建了一套前端项目架构 基于 lerna + yarn 的 monrepo的仓库, 主要是后面会学习输出的一些东西, 整个架子先搭建起来。 2d 和 3d 公共 util 的封装 个人 npm 包的发布 (rollup) 2d react 项目 搭建(vite) 3d react 项目 搭建 (webpack) 搭建一套基于webpack 5 的cli 每个项目都有一些特定的依赖, 但是也会有一些相同的依赖。比如eslint、 babel 的一些基础配置,
10分钟带你从0到1搭建monorepo 工程化项目(一)
|
存储 JavaScript
vue中query路由传参刷新页面后数据丢失解决
vue中query路由传参刷新页面后数据丢失解决
|
9月前
|
缓存 Rust 前端开发
深入理解 Webpack 与 Vite 的构建差异与性能边界
本文深入对比 Webpack 与 Vite 的构建原理与性能差异。Webpack 采用“打包优先”策略,功能强大但启动慢;Vite 基于原生 ESM 实现“按需编译”,显著提升开发效率,冷启动和 HMR 速度远超 Webpack。生产环境下 Vite 凭借 esbuild 和 Rollup 生成更小体积、更快构建。二者在生态、配置、资源消耗等方面各有优劣,适用于不同场景。新项目推荐优先考虑 Vite,追求极致开发体验;大型复杂项目仍可选用 Webpack。理解其核心差异是优化构建流程的关键。
1357 1
|
资源调度 JavaScript API
【Vue2 / Vue3】 一个贼nb,贼强大的自定义打印插件
【Vue2 / Vue3】 一个贼nb,贼强大的自定义打印插件
14098 120
|
JavaScript API 索引
js中的reduce()方法 讲解 和实现
`reduce()` 方法对数组元素依次应用一个回调函数,将结果累计并最终返回单一值。语法为 `reduce(callback(accumulator, currentValue, currentIndex, array), initialValue)`。参数包括累计器(初次为初始值或首元素)、当前元素值、索引及数组自身。此方法需返回值供下一轮迭代使用。常见应用场景包括计算数组总和与平均值、统计元素频率、过滤与转换数组内容及去除重复项等。例如,可通过 `reduce()` 快速计算 `[1, 2, 3, 4, 5]` 的总和或对对象属性值求和。此外,还可自定义实现 `reduce()` 方法
7649 1
|
Java Spring
使用Gradle创建SpringBoot项目
使用Gradle创建SpringBoot项目
1792 0
|
移动开发 前端开发 JavaScript
开源即时通讯IM框架MobileIMSDK的H5端技术概览
开源即时通讯IM框架MobileIMSDK的H5端技术概览
720 2
开源即时通讯IM框架MobileIMSDK的H5端技术概览
|
数据采集 缓存 前端开发
获取任意网站 icon 这件事并没那么简单
本文源自开发者Pony在创作“标签星球”过程中遇到的一个需求:如何高效获取并展示网站的Logo。为此,他深入研究并自建了一套图标获取与托管服务。标签星球是一款基于浏览器收藏夹的启动页应用,能将收藏夹转换为导航页形式,并支持模糊搜索及收藏夹分享等功能。在寻找合适服务时,Pony发现现有解决方案要么受限于技术壁垒,要么覆盖范围有限,这促使他着手搭建自己的服务。文章详细介绍了该服务的设计思路和技术实现过程,包括对多种网站图标设置方法的分析、链接处理策略、获取流程、缓存机制以及错误处理方案等。
629 2
|
iOS开发 Perl
解决pod install报错:ffi is an incompatible architecture
解决pod install报错:ffi is an incompatible architecture
653 2

热门文章

最新文章