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 输入中单击建议的位置后，该字段似乎已填写 - 但是当我开始输入另一个字段时，位置输入字段恢复为我输入的字母位置搜索。点击“post”，然后点击“news”或“offers”试试看： https ://jsfiddle.net/dvdgdnjsph/157w6tk8/

谁能告诉我怎么了？

4

4 回答 4

2

您遇到的问题是v-modelbinds on 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

我有这样的东西来捕捉 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 回答
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通常用于制作可重用组件，通过接收来自父级的a ，并在检测到组件中输入元素的更改时value prop发出带有用户输入值的事件。input然后我们可以使用<my-component v-model='parentData'></my-component>作为孩子的行为，从父母的角度来看，它就像一个简单的输入元素。例子

于 2017-01-08T10:40:30.407 回答
1

不能确定。但看起来 jQuery 插件只是改变了 input#get-article-location 的值，而不是 Vue 模型。因此，当您触发模型更新（例如编辑标题）时，它会用您输入的任何内容覆盖完整的位置。

于 2017-01-06T09:26:58.777 回答