How to add a computed array in my object?

Question

For a location in a map, I would like to add a computed array in my object like this one:

marker: L.latLng(33.901445, -5.532788),

Actual Data:

Projects: [
project [0]:{
  lat : 10.0
  lng: -10.0
},
  project [1]:{
  lat : 15.0
  lng: -15.0  
},
 ],

The result i want :

Projects: [
project [0]:{
  lat : 10.0
  lng: -10.0
  marker : L.latLng(10.0, -10.0)
},
  project [1]:{
  lat : 15.0
  lng: -15.0
  marker : L.latLng(15.0, -15.0)
},
 ],

Thank you

Can you provide some more context, perhaps a code example of what exactly you're trying to do. I'm not sure computed is what you want in your case, but it's hard to tell based on what's here. — jonnycraze
– jonnycraze, Commented Feb 5, 2019 at 14:19

yassine j · Accepted Answer · 2019-02-05 15:08:32Z

2

I found this code, thanks.

export default {
  computed: {
    NewObject() {
      return this.projects.map(project => {
        let p = project;

        p.marker = [{
          lat: project.lat,
          lng: project.lng,
        }];

        return p;
      });
    },
  }
}

In Template :

<div class="col-md-4"  v-for="project in NewObject">
  <l-map :zoom="zoom" :center="project.marker[0]" @click="">
    <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
    <l-marker  :lat-lng="project.marker[0]" @click=""></l-marker>
  </l-map>
</div>

edited Feb 5, 2019 at 15:08

answered Feb 5, 2019 at 14:47

yassine j

5151 gold badge12 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jonnycraze Over a year ago

Do you mind showing a final example of how you'll use it? I'm curious.

yassine j Over a year ago

Sure. I eddited for you.

jonnycraze · Accepted Answer · 2019-02-05 14:52:41Z

0

I think you want a simple method that can return an object for you. Are you using https://www.npmjs.com/package/vue2-google-maps

<template>
  <div id="app">
    <pre>{{projects}}</pre>
  </div>
</template>

<script>
export default {
  name: "App",
  methods: {
    setMarkerPosition(lat, lng) {
      return { lat: lat, lng: lng };
    },
    addMarkerPosition(project) {
      project.markerCenter = this.setMarkerPosition(project.lat, project.lng);
      console.log(project);
    }
  },
  mounted() {
    this.projects.forEach(project => {
      this.addMarkerPosition(project);
    });
  },
  data() {
    return {
      projects: [
        {
          lat: 10.0,
          lng: -10.0,
          markerCenter: null
        },
        {
          lat: 15.0,
          lng: -15.0,
          markerCenter: null
        }
      ]
    };
  }
};
</script>

Edit: if you want markerCenter to be reactive i believe you need to include it on your data shape at the beginning, as a heads up.

Edit 2: There was a slight bug in my code i updated it.

edited Feb 5, 2019 at 14:52

answered Feb 5, 2019 at 14:35

jonnycraze

5083 silver badges17 bronze badges

3 Comments

yassine j Over a year ago

I import localisation from database not from the map. I want to creat an object inside my data as my example to use it correctly..

jonnycraze Over a year ago

The above will do just that.

yassine j Over a year ago

Thank you sir for your interest. !

Collectives™ on Stack Overflow

How to add a computed array in my object?

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related