Vue jsを含むgeocomplete - 場所が削除されています

Question

Vue.jsとともにjQueryジオコンプリートを使用して、ジオデータをフォームに入力しようとしています。しかし、その後、私は中に入力を開始するとき - それはフィールドが記入されたように見える、私は、get-オファー位置入力から提案された位置をクリックした後

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

：

私のコードは、このフォームが含まれています別のフィールドでは、ロケーション入力フィールドは、ロケーション検索のために入力した文字に戻ります。 [投稿]、[ニュース]、[オファー]のいずれかをクリックして試してみてください。 https://jsfiddle.net/dvdgdnjsph/157w6tk8/

誰かに間違いを教えてもらえますか？

Answer 1

問題はgeolocation dropdownは、入力イベントが発生しませんので、v-modelが更新されていないプログラムで値を変更するプラグインですので、v-modelは、inputに結合することです。場合は、場所を選択した後にスペースを入力してみてください、あなたはそれが固執することがわかります。

v-modelは、v-on:inputの構文砂糖に過ぎません。代わりに、v-onを使用してイベントを発生させることができます。残念ながら、JSFiddleは私が保存できません

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

か：あなたはボックスから抜け出すためにunfocusする必要があるとしているあなたは、単に行うことができますので、blurイベントは、あなたの最良の選択肢である可能性が高いことを考慮すると、あなたのフィドルを更新してください、しかし、私はそれを上のコードで動作させました。

完全にするため、場合にあなたが広範囲にこの動作を利用したい、とVueのドキュメントは、この点ではかなり限られているので、あなたがコードをカプセル化するcustom directiveを書くことがあります。

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

わからないことがあります。しかし、jQueryプラグインは入力＃get-article-location値を変更するだけで、Vueモデルは変更しないようです。あなたはモデル更新（例えば編集見出し）をトリガするときだから、あなたが入力したものは何でもして完全な場所を上書き

Answer 3

私は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 4

これは、受信側ユーザー入力の双方向バインディングとして、入力要素のinputイベントをリッスンするためですが、jsプラグイン（jquery-geocompleteなど）は明らかにjs、他の回答で議論したように、ビューモデルのdataは変化しません。

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

：ちょうどプラグインのgeocode:resultイベントに耳を傾け、手動で（私はそれをここに掲示していますので、jsfiddleに何か問題があるように思われる）コードとdataを変更、この問題を解決するには

余分な知識：上記のv-modelのメカニズムは、通常、親からvalue を受け取り、コンポーネントの入力要素の変更を検出するとユーザ入力値でinputイベントを送出することによって、再利用可能なコンポーネントを作成する際に使用されます。子が親の観点からの単純な入力要素とまったく同じように動作するので、<my-component v-model='parentData'></my-component>を使用することができます。あなたが持っているexample