Question

所以我有这段代码：

    <template>
  <div id="search-wrapper">
    <div>
      <input
        id="search_input"
        ref="autocomplete"
        placeholder="Search"
        class="search-location"
        onfocus="value = ''"
        @keyup.enter.native="displayPic"
      >
    </div>
  </div>
</template>

<script>
import VueGoogleAutocomplete from "vue-google-autocomplete";

export default {
  data: function() {
    return {
      search_input: {},
      pic: {}
    };
  },

  mounted() {
    this.autocomplete = new google.maps.places.Autocomplete(
      this.$refs.autocomplete

    );
    this.autocomplete.addListener("place_changed", () => {
      let place = this.autocomplete.getPlace();
      if (place.photos) {
        place.photos.forEach(photo => {
          let pic=place.photos[0].getUrl()
          console.log(pic);
        });
      }
    });
  },
  methods: {
    displayPic(ref){
      this.autocomplete = new google.maps.places.Autocomplete(
      this.$refs.autocomplete);
      this.autocomplete.addListener("place_changed", () => {
      let place = this.autocomplete.getPlace();
      if (place.photos) {
          place.photos.forEach(photo => {
            let pic=place.photos[0].getUrl()
            console.log(pic);
          });
        }
    })
  },
  }
}

在选择位置之一后，我想将“ pic”参数传递给我的模板，结果是函数“ displayPic”。我已经尝试了几种方法，但是我对Vue还是很陌生，所以有些棘手，至少直到我了解组件的运行方式为止。现在，该事件正在输入中，但是我希望在选择位置时触发该事件。
有什么想法我该怎么做？现在，最重要的是将pic值添加到我的模板中。

Answer 1

    <template>
      <div id="search-wrapper">
        <div>
          <input style="width:500px;"
            id="search_input"
            ref="autocomplete"
            placeholder="Search"
            class="search-location"
            onfocus="value = ''"
            v-on:keyup.enter="displayPic"
            @onclick="displayPic"
          >
          <img style="width:500px;;margin:5%;" :src="pic" >
        </div>
      </div>
    </template>

<script>
import VueGoogleAutocomplete from "vue-google-autocomplete";

export default {
  data: function() {
    return {
      search_input: {},
      pic:""
    };
  },

  mounted() {
    this.autocomplete = new google.maps.places.Autocomplete(
      this.$refs.autocomplete,
      {componentRestrictions: {country: "us"}}
    );

  },

  methods: {
    displayPic: function(){
      this.autocomplete.addListener("place_changed", () => {
      let place = this.autocomplete.getPlace();
      if (place.photos) {
          place.photos.forEach(photo => {
            this.pic=place.photos[0].getUrl()
          });
        }
    })
  },
  }
}
</script>

在VUE中以模板显示通过的图像

1 个答案: