解决 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
js通过input框输入属性和值,改变div的属性
js通过input框输入属性和值,改变div的属性
119 0
|
6月前
|
JavaScript 前端开发
【vue】iview如何把input输入框和点击输入框之后的边框去掉
【vue】iview如何把input输入框和点击输入框之后的边框去掉
139 0
|
2月前
|
前端开发 算法 JavaScript
React项目input输入框输入自动失去焦点
本文讨论了在React项目中如何处理input输入框自动失去焦点的问题,特别是在移动端开发中。文章提供了一个使用React Native的TouchableWithoutFeedback组件来监听点击事件,并在事件处理函数中通过调用Keyboard.dismiss()方法使输入框失去焦点的示例代码。这种方法可以确保在用户点击页面其他区域时,键盘能够收起,输入框失去焦点。
83 1
React项目input输入框输入自动失去焦点
|
3月前
|
JavaScript 前端开发
怎样在vue中隐藏el-form-item中的值、设置输入框的值是只读
这篇文章介绍了在Vue框架中使用Element UI组件库时,如何通过v-if指令和v-model绑定来控制`el-form-item`的显示与隐藏,以及如何通过设置`readonly`属性让输入框变为只读状态。
怎样在vue中隐藏el-form-item中的值、设置输入框的值是只读
|
4月前
element UI实现输入建议下拉列表 —— el-select filterable可筛选的下拉列表 or 带输入建议的输入框 el-autocomplete ?
element UI实现输入建议下拉列表 —— el-select filterable可筛选的下拉列表 or 带输入建议的输入框 el-autocomplete ?
227 0
|
5月前
jq获取多个相同name名的input框的value值
jq获取多个相同name名的input框的value值
45 0
|
6月前
【UI】 修改element-ui input输入框placeholder提示信息、占位符的样式
【UI】 修改element-ui input输入框placeholder提示信息、占位符的样式
588 0
|
6月前
|
数据库
vue+elementui中,el-select多选下拉列表中,如何同时获取:value和:label的值?
vue+elementui中,el-select多选下拉列表中,如何同时获取:value和:label的值?
|
12月前
|
JSON JavaScript 数据库
vue搜索表格功能,根据input输入框和下拉框传递的参数进行搜索
vue搜索表格功能,根据input输入框和下拉框传递的参数进行搜索
122 1
|
12月前
|
前端开发 JavaScript
React基础语法08-点击按钮,获取input框的值(通过ref来获取)
React基础语法08-点击按钮,获取input框的值(通过ref来获取)
182 0