2

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/

誰が何が悪いのか教えてもらえますか?

4

4 に答える 4

2

あなたが抱えている問題は、に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/

于 2017-01-08T10:51:28.083 に答える
1

はっきりとは言えません。しかし、jQuery プラグインは input#get-article-location の値を変更するだけで、Vue モデルは変更しないようです。そのため、モデルの更新 (見出しの編集など) をトリガーすると、入力した内容で完全な場所が上書きされます。

于 2017-01-06T09:26:58.777 に答える
1

これはv-model、双方向バインディングとして、ユーザー入力を受信する方法でinput入力要素のイベントをリッスンするのに対し、js プラグイン (jquery-geocomplete など) は明らかに js を介して入力値を設定し、ビュー モデルのdata他の回答で説明したように、変更されていません。

これを修正するにgeocode:resultは、プラグインのイベントをリッスンし、datawith コードを手動で変更します (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は通常、再利用可能なコンポーネントを作成する際に使用されます。value prop親からを受け取り、inputコンポーネント内の入力要素の変更を検出したときにユーザー入力値でイベントを発行します。そして<my-component v-model='parentData'></my-component>、子が親の観点から単純な入力要素とまったく同じように動作するように使用できます。例

于 2017-01-08T10:40:30.407 に答える
1

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) の名前を実際に変更する必要があると思います。別のスクリプトで使用され、問題が発生する可能性があります。

于 2017-01-06T09:52:41.573 に答える