Question

我在我的Vue方法中通过JS设置输入的值。它出现。但是一旦我去保存它，它只保存我在方法中设置的值之前键入的内容。例如：我输入new yor和选择＆＃34;纽约＆＃34;来自触发方法的选项，并使用该位置的位置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
      })
    },

从方法JS设置Vue输入值

1 个答案: