VueJS2访问子

Question

我通常使用ref关键字来访问vue中的组件。但我似乎并不了解如何从组件中访问HTML标记。

我试过了：

<input type="text" ref="searchAddress" id="searchAddress" name="searchAddress" class="form-control" v-model="incidentForm.searchAddress">

并在vue组件中：

var input = this.$refs.searchAddress;

但是这不起作用，所以我认为它仅在引用组件时有效？如何从vue中访问输入标签？

我创建了一个类，用于管理将包含在我的Vue文件中的所有GoogleMaps Api调用。因此，我没有看到一种方法，我如何处理访问特定输入字段的数据。什么是避免像这样的直接访问的正确方法？

完整的代码示例，更具体： GoogleMaps的自动填充功能不会像我期望的那样返回任何内容。 Uncaught TypeError: Cannot set property 'autocompletePlace' of undefined。 this.autocompletePlace = place似乎无效。

methods: {
        initMap: function initMap() {
            this.initialLocation = this.createInitialLocation(48.184845, 11.252553);
            this.mapSetup(this.$refs.map, this.initialLocation, function () {
                this.initAutoCompleteListener(function (place) {
                    this.autocompletePlace = place;
                });
            }.bind(this));
        }
    }

GoogleMapsApi.js

export default {
    data() {
        return {
            map: '',
            currentIncidentLocation: '',
            autocomplete: '',
            searchMarker: ''
        }
    },

    events: {
        currentIncidentLocation: function(location) {
            this.currentIncidentLocation = location;
        }
    },

    methods: {
        createInitialLocation: function(latitude, longitude) {
            return new google.maps.LatLng(latitude, longitude);
        },

        mapSetup: function(selector, initialLocation, callback) {
            this.map = new google.maps.Map(selector, {
                zoom: 10,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
            });
            this.map.setCenter(initialLocation);
            this.searchMarker = this.createMarker();
            var input = document.getElementById('searchAddress');
            this.autocomplete = new google.maps.places.Autocomplete(input);
            callback();
        },

        initAutoCompleteListener: function(callback) {
            this.autocomplete.addListener('place_changed', function() {
                var place = this.autocomplete.getPlace();
                if (!place.geometry) {
                    window.alert("Der Ort konnte nicht gefunden werden");
                    return;
                }
                callback(place);
            }.bind(this));
        },

        createMarker: function() {
            var marker = new google.maps.Marker({
                map: this.map
            })
            return marker;
        }
    }
}

GISView.vue

<template>
    <div ref="map" id="map" class="google-map" style="height: 800px; position: relative; overflow: hidden;">
    </div>
</template>

<script>
    import GoogleMaps from '../mixins/GoogleMaps.js';

    export default {
        mixins: [GoogleMaps],

        data() {
            return {
                initialLocation: '',
                autocompletePlace: ''
            }
        },

        mounted() {
            this.$events.$on("MapsAPILoaded", eventData => this.initMap());
        },

        methods: {
            initMap: function() {
                this.initialLocation = this.createInitialLocation(48.184845, 11.252553);
                this.mapSetup(this.$refs.map, this.initialLocation, function() {
                    this.initAutoCompleteListener(function(place) {
                        this.autocompletePlace = place;
                    })
                }.bind(this));
            }
        }
    }
</script>

Answer 1

绑定外部函数，但不绑定内部函数。尝试

this.initAutoCompleteListener(function(place) {
     this.autocompletePlace = place;
}.bind(this))

Answer 2

您可以使用$ refs以相同的方式访问HTML标记，请参见下面的示例：

<template>
  <div class="example">
    <input
      type="text"
      id="searchAddress"
      name="searchAddress"
      class="form-control"
      ref="searchAddress"
      placeholder="Input placeholder"
      v-model="inputModel">
  </div>
</template>

<script>
  import Hello from './components/Hello'

  export default {
    name: 'app',

    data() {
      return {
        inputModel: ''
      }
    },

    mounted() {
      const el = this.$refs.searchAddress
      console.log('Ref to input element: ', el)
      console.log('Placeholder attr from the ref element: ', el.placeholder) // logs "Input placeholder"
    }
  }