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是一个以编程方式更改值的插件，输入事件未被触发，因此{{1} }没有更新。作为一种情况，尝试在选择一个位置后键入一个空格，你会看到它坚持。

幸运的是，v-model只不过是v-model的语法糖，因此您可以使用v-on:input来触发您的活动。考虑到您需要v-on开箱即用，unfocus事件可能是您的最佳选择，因此您可以这样做：

blur

不幸的是，JSFiddle不会让我保存或更新您的小提琴，但我确实让它使用上面的代码。

为了完整性，如果您想广泛使用此行为，并且因为Vue文档在这方面相当有限，您可以编写custom directive来封装代码：

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

然后你可以这样使用：

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

这里是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

这是因为v-model作为双向绑定，在接收用户输入方式上，侦听输入元素上的input事件，而js插件（如jquery-geocomplete）显然通过js设置输入值，这导致视图模型的data没有像我们在其他答案中讨论的那样改变。

要解决此问题，只需听取插件的geocode:result事件，然后手动更改data代码（jsfiddle似乎有问题，所以我在这里发布）：< / p>

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>，因为孩子的行为与父母视角中的简单输入元素完全相同。 example

使用Vue js完成地理填充 - 删除位置

4 个答案: