[Vuejs]-How do I filter pins on Google Map pulled from a json api endpoint using Vue

by

0👍

If you have v-model on an <input> field like mentioned in your question, you are binding the value of this <input> field to a variable probably defined in the data part of your Vue component. The value is always up to date in the model (reactive binding). You can watch this value and then trigger a function which updates Google Maps. Here is an example:

Vue.component('demo', {
  data () {
    return {
      inputField: ''
    };
  },
  created () {
    console.log('Component script loaded, HTML not yet ready, load the data from your backend. Use a flag like isLoading or similar to indicate when the data is ready to enable input.');
  },
  mounted () {
    console.log('Component mounted, HTML rendered, load Google Maps');
  },
  watch: {
    inputField (newValue) {
      console.log(`inputField changed to ${newValue}. Trigger here a method which update Google Maps. Make sure to debounce the input here, so that it does not trigger a Google Maps update too often.`);
    }
  },
  template: `
    <div>
      <input type="text" v-model="inputField" placeholder="Lookup place">
    </div>`
});

new Vue({ el: '#vue-demo-container' });
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="vue-demo-container">
  <demo></demo>
</div>

Leave a comment