从方法 JS 设置 Vue 输入值

Question

我在我的 Vue 方法中通过 JS 设置输入的值。它似乎可以工作。但是一旦我去保存它，它只会保存我在方法中设置值之前输入的内容。例如：我输入new yor 并从触发方法的选项中选择“纽约”并使用该地点的地点ID 更新值。但是当我保存数据（提交按钮）并在数据库中检查它时，它显示new yor。它没有保存更新的值。我知道我可以使用@click、@change 等...但不确定这是否是最好的设置。如何更改我的代码以允许 Vue 获取更新的值？

methods: {
      autocomp() {
          const searchInput = document.getElementById('searchTextField');
          const autocomplete = new google.maps.places.Autocomplete(searchInput);
          autocomplete.addListener('place_changed', function(){
            var place = autocomplete.getPlace();
            searchInput.value = place.place_id
          })
        },

HTML

  <div class="input-group">
    <input v-model="newPost.businessid" @keyup="autocomp" type="text" placeholder="Business ID" class="form-control" id="searchTextField">
  </div>

Answer 1

首先，

替换

searchInput.value = place.place_id

与

that.newPost.businessid = place.place_id

Vue 使用双向数据绑定，因此变量的值与输入值直接相关。

编辑：

您必须保存对 Vue 对象的引用，因为它无法从侦听器方法访问为 this

autocomp() {
      const searchInput = document.getElementById('searchTextField');
      const autocomplete = new google.maps.places.Autocomplete(searchInput);
    var that = this;
      autocomplete.addListener('place_changed', function(){
        var place = autocomplete.getPlace();
        that.newPost.businessid = place.place_id
      })
    },