时间戳

首页 > 解决方案 > @blur 标记清除 Vue.js SPA 组件中的输入值

javascript - @blur 标记清除 Vue.js SPA 组件中的输入值

问题描述

我正在将使用 jQuery 的应用程序转换为 Vue.js SPA（没有 jQuery）。目前，一些 jQuery 语句会在相关输入字段获得焦点时切换隐藏 div 的显示，然后在模糊时再次隐藏。

在一个 vue 组件中，我添加了一个数据选项，phoneNumberHasFocus在现场焦点上设置为 true，在模糊上设置为 false。这有效，div 的显示在焦点/模糊上切换。

但是，输入字段中输入的任何值都会在模糊时丢失。 

export default {
  name: 'profile',
  data: function() {
    return {
      phoneNumberHasFocus: false
    }
  },
}
<div class="col-md-6 col-sm-8">
  <div class="input-area">
    <input type="text" class="form-control" placeholder="Phone number" name="phoneNumber" ref="phoneNumber" :value="user.userdetails.phoneNumber" @focus="phoneNumberHasFocus=true" @blur="phoneNumberHasFocus=false" />
  </div>
  <div v-show="phoneNumberHasFocus" class="help-text">
    Please provide a phone number here if you’d like us to contact you by phone when you make an enquiry. Include the area code and extension if required.
  </div>
</div>

当焦点位于输入字段上时，是否有人遇到过此问题或有其他方法来切换 div 的显示？

标签： javascriptjqueryvue.js

解决方案

添加user.userdetails.phoneNumber到您的数据方法

export default {
 name: 'profile',
 data: function() {
  return {
   phoneNumberHasFocus: false
   user: {
     userdetails: {
      phoneNumber: ''
     }
   }
  }
 },
}

并v-model用于 2 路绑定

<input type="text" class="form-control" v-model="user.userdetails.phoneNumber" placeholder="Phone number" name="phoneNumber" ref="phoneNumber" v-mo="user.userdetails.phoneNumber" @focus="phoneNumberHasFocus=true" @blur="phoneNumberHasFocus=false" />

推荐阅读