CODEWITHSUNDEEP
vue.jsgeocodervue2-google-maps
boldsinas101
boldsinas101

Reputation: 330

How to pass the arrays to another vue component and apply to a variable

I want to pass the arrays in another component and assigned it to a variable

MainList.vue

<map-view
    :model="addressCoordinates">
</map-view>

//vue js code
this.addresses.forEach(a => {  
    Vue.$geocoder.setDefaultMode('address');      // this is default
    var addressObj = {
        address_line_1: a.address_line_1,
        address_line_2: a.address_line_2,
        city: a.city,
        country: a.country.name
    }
    Vue.$geocoder.send(addressObj, response => {
        this.addressCoordinates = response.results[0].geometry.location
        console.log(this.addressCoordinates)
    });
})

My question is how can I assign it in a variable in MapView.vue

export default {
  name: 'MapView',
  props: { 
    model: {},
  },
  data() {
    return {
        coordinates: {}, //I want to pass the the model arrays data here
     }

In order for me to loop those data here

<gmap-marker v-for="(item, key) in coordinates"/> <!-- Coordinates are from models data in Main.vue-->

I had a hard time to explain because this problem is a little bit complicated to me.

Upvotes: 1

Views: 1056

Answers (1)

Amaarockz
Amaarockz

Reputation: 4684

You can pass it as props and use a watch handler to assign it to a component variable or directly use a computed property

Method 1:

MainList.vue

<map-view
    :model="addressCoordinates">
</map-view>

MapView.vue

export default {
  name: 'MapView',
  props: { 
    model: {
     type: Array,// if this is an array or use type: Object if that's an object
     default: null
    }
  },
  data() {
    return {
        coordinates: null, //I want to pass the the model arrays data here
     }
  },
  watch: {
   model(newVal, oldVal) {
     this.coordinates = {...newVal} // if model is an object
     this.coordinates = [...newVal] // if model is an array

   }
  }

Method 2:

MainList.vue

<map-view
    :model="addressCoordinates">
</map-view>

MapView.vue

export default {
  name: 'MapView',
  props: { 
    model: {
     type: Array,// if this is an array or use **type: Object** if that's an object
     default: null
    }
  },
  data() {
    return {
        coordinates: null, //I want to pass the the model arrays data here
     }
  },
  computed: {
   getCoordinates() {
    **// if model prop is an array** 
    if(this.model.length) return this.model;
    else return [];

    **// if model prop is an object**
    enter code here
    if(this.model !== null && Object.keys(this.model).length) return this.model;
    else return {};
   }
  }

and your looping should be

<gmap-marker v-for="(item, index) in getCoordinates" :key=index> <!-- Coordinates are from models data in Main.vue-->
  //In order to display the lat and log
  <div> Lat is {{item.lat}} </div>
  <div> Long is {{item.lng}} <div>
</gmap-marker>

Upvotes: 1

Related Questions