Question

VueJS2 访问子元素内的 HTML 元素

2017-05-11

116

javascript vue.js

我通常使用 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 的自动完成功能没有返回任何我期望的内容。 未捕获的 TypeError：无法设置未定义的属性“autocompletePlace” 。 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"
    }
  }