How to add a computed array in my object? - vue.js

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

Answer 1

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>

Answer 2

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.