geocomplete с Vue JS - местоположение стирается

Question

Я пытаюсь использовать jQuery geocomplete вместе с Vue.js, чтобы заполнить форму геоданными.

Мой код содержит эту форму:

<form>
    <label for="get-offer-location">location: </label><input id="get-offer-location" v-model="newoffer.location" type="text"/>
    <div style="visibility:hidden">
        <input name="lat" type="text" value=""/>
        <input name="lng" type="text" value=""/>
    </div>
</form>

После того, как я нажимаю на предложенное местоположение в поле ввода get-offer-location, создается впечатление, что поле заполнено, но затем, когда я начинаю печатать в другом поле, поле ввода местоположения возвращается к буквам, которые я набрал для поиск местоположения. Попробуйте здесь, нажав "пост", затем "новости" или "предложения": https://jsfiddle.net/dvdgdnjsph/157w6tk8/

Может кто-нибудь сказать мне, что не так?

Answer 1

Проблема в том, что v-model связывает input, так как geolocation dropdown это плагин, который изменяет значение программно, событие ввода не запускается, поэтому v-model не обновляется Как вариант, попробуйте ввести пробел после выбора места, вы увидите, что оно придерживается.

К счастью, v-model не более чем синтаксический сахар для v-on:inputтак что вы можете использовать v-on провести ваше мероприятие вместо. Учитывая, что вам понадобится unfocus чтобы выйти из коробки, blur Событие, вероятно, будет вашим лучшим вариантом, так что вы можете просто сделать:

v-on:blur="newarticle.location = $event.target.value"

К сожалению, JSFiddle не позволяет мне сохранять или обновлять вашу Fiddle, но я справился с приведенным выше кодом.

Для полноты, если вы хотите широко использовать это поведение и поскольку документы Vue в этом отношении довольно ограничены, вы можете написать пользовательскую директиву для инкапсуляции кода:

Vue.directive('model-blur', {
  bind: function(el, binding, vnode) {
    el.addEventListener('blur', function() {
      vnode.context[binding.expression] = el.value;
    });
  }
});

Тогда вы можете использовать так:

<input v-model-blur="myVar" />

Вот JSFiddle: https://jsfiddle.net/4vp6Lvmc/

Answer 2

У меня есть что-то вроде этого для перехвата события geocomplete и попробуйте установить значение vueJS:

$("#get-article-location")
  .geocomplete({details: ".details"})
  .bind("geocode:result", function (event, result) {
    vm.newoffer.location = result.formatted_address;
    console.log('done');
  });

Но что-то все еще кажется неправильным, я думаю, что вы действительно должны изменить имя вашего экземпляра vueJS (var vm) он может быть использован другим скриптом и создавать проблемы.

Answer 3

Это потому что v-modelв качестве двусторонней привязки, на пути приема-ввода пользователя, слушает input событие в элементе ввода, в то время как плагины js (например, jquery-geocomplete), очевидно, устанавливают входные значения через js, что приводит к data не меняется, как мы обсуждали в других ответах.

Чтобы это исправить, просто послушайте geocode:result событие плагина и вручную изменить data с кодом (кажется, что-то не так с jsfiddle, поэтому я выкладываю это здесь):

var vueVM = this;

$("#get-offer-location").geocomplete({ details: ".details" });

$("#get-article-location")
.geocomplete({ details: ".details" })
/***** highlight start *****/
.bind("geocode:result", function(event, result){
    console.log(result);
    //tried result.something but couldn't find the the same thing as `this.value`
    vueVM.newarticle.location = this.value;
});
/***** highlight end *****/

дополнительные знания: механизм v-model Вышеуказанное обычно используется для изготовления компонентов многократного использования, получая valueprop от родителя, и испуская input событие со значением пользовательского ввода при обнаружении изменения элемента ввода в компоненте. И тогда мы можем использовать <my-component v-model='parentData'></my-component> поскольку ребенок ведет себя точно так же, как простой элемент ввода с точки зрения родителя. пример

Answer 4

Не могу сказать точно. Но похоже, что плагин jQuery просто меняет значение input#get-article-location, но не модель Vue. Поэтому, когда вы запускаете обновление модели (например, редактирование заголовка), оно перезаписывает полное местоположение тем, что вы ввели.