тег @blur очищает значение ввода в Vue.js Компонент SPA

#javascript #jquery #vue.js

Вопрос:

Я конвертирую приложение, использующее 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, когда фокус сосредоточен на поле ввода?

Ответ №1:

Добавьте user.userdetails.phoneNumber в свой метод обработки данных

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

и использовать v-model для двусторонней привязки

 <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" />

1. Это было полезно, чтобы направить меня к решению. Я использовал vuex-map-fields пакет, добавил вычисляемое свойство через ...mapFields и обновил html для использования директивы v-model. Я опубликую свое решение сейчас. Я осознаю, что не упомянул зависимость хранилища vuex в своем вопросе.

Ответ №2:

Я смог решить эту проблему, используя v-model директиву и vuex-map-fields пакет для обеспечения двусторонней привязки данных к хранилищу, что привело к желаемому результату — не очищать значение поля при размытии, скрывая соответствующий div с текстом справки.

 <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" v-model="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>


<script>
import { mapFields } from 'vuex-map-fields';

export default {
  name: 'profile',
  data: function () {
    return {
      phoneNumberHasFocus: false,
    }
  },
  computed: {
    ...mapFields([
      'user.userdetails.phoneNumber',
    ]),
  },
  mounted: function () {
    this.$store.dispatch('fetch_user');
  },
}
</script>