解决 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的属性
124 0
|
4月前
|
JavaScript 前端开发
怎样在vue中隐藏el-form-item中的值、设置输入框的值是只读
这篇文章介绍了在Vue框架中使用Element UI组件库时,如何通过v-if指令和v-model绑定来控制`el-form-item`的显示与隐藏,以及如何通过设置`readonly`属性让输入框变为只读状态。
怎样在vue中隐藏el-form-item中的值、设置输入框的值是只读
|
5月前
Element UI【实战范例】下拉选择 el-select 的 change 事件传入选中值+自定义参数
Element UI【实战范例】下拉选择 el-select 的 change 事件传入选中值+自定义参数
835 1
|
5月前
element UI实现输入建议下拉列表 —— el-select filterable可筛选的下拉列表 or 带输入建议的输入框 el-autocomplete ?
element UI实现输入建议下拉列表 —— el-select filterable可筛选的下拉列表 or 带输入建议的输入框 el-autocomplete ?
265 0
|
7月前
【UI】 修改element-ui input输入框placeholder提示信息、占位符的样式
【UI】 修改element-ui input输入框placeholder提示信息、占位符的样式
676 0
|
JSON JavaScript 数据库
vue搜索表格功能,根据input输入框和下拉框传递的参数进行搜索
vue搜索表格功能,根据input输入框和下拉框传递的参数进行搜索
132 1
|
JavaScript
VUE element-ui之table表格中嵌套输入框,且输入框失焦自动勾选当前行
VUE element-ui之table表格中嵌套输入框,且输入框失焦自动勾选当前行
1719 0
VUE element-ui之table表格中嵌套输入框,且输入框失焦自动勾选当前行
|
前端开发 JavaScript
React基础语法08-点击按钮,获取input框的值(通过ref来获取)
React基础语法08-点击按钮,获取input框的值(通过ref来获取)
188 0
|
JavaScript
ElementUI下拉框选择后不显示值
ElementUI下拉框选择后不显示值
240 0
|
JavaScript
JQuery 判断radio是否有选中,获取选中的值demo示例(整理)
JQuery 判断radio是否有选中,获取选中的值demo示例(整理)