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

Question

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.

why don't you loop on model prop ? which is addressCoordinates passed from parent ? — Mohsin Amjad, Aug 02 '21 at 08:59
yes the addressCoordinates are passed in the model and it contains the array of coordinates from different address. For example, it contains the coordinates of address 1, address2, and so on — boldsinas101, Aug 02 '21 at 09:03
In your `MapView` component, you can use `this.model` to access the prop value in your computed properties, methods and lifecycle hooks. Within the template you omit the `this.` prefix, something like `v-for="(item, key) in model"` — Phil, Aug 02 '21 at 09:04

Amaarockz · Answer 1 · 2021-08-03T01:23:22.633

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>

In coordinates, I want to get the value of lat and lng value. In console log, it shows that it has lat and lng but I do not know how to get it. Because in stattic value, it likes ``` coordinates: {0: {lat: model[0], lng: model[0]}, 1: {lat: model[1], lng: model[1]}} ``` I want this something like this. — boldsinas101, Aug 03 '21 at 01:16
I think I should have another thread because another problem is about the markers are not showing on google map. There are base from latitude and longitude from arrays of data — boldsinas101, Aug 03 '21 at 05:05
``` coordinates: {0: {lat: model[0], lng: model[0]}, 1: {lat: model[1], lng: model[1]}}``` is not an array....its an object — Amaarockz, Aug 03 '21 at 05:51
``` coordinates: [0: {lat: model[0], lng: model[0]}, 1: {lat: model[1], lng: model[1]}]``` is only an array — Amaarockz, Aug 03 '21 at 05:51
Also make sure you lat and lng has some finite values instead of variables — Amaarockz, Aug 03 '21 at 05:52

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

1 Answers1