Отобразить переданное изображение в шаблоне, в VUE

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>