Here is the template I am working with:
<template>
<div>
<div v-for="report in reports">
<div class="map" v-bind:id="mapID = report.started.toUpperCase()" v-text="report.started">
{{hello(mapID)}}
</div>
</div>
</div>
Now, take a look at the model:
<script>
import addmap from '../components/addmap';
export default {
data: function(){
return {
reports: [],
mapid: "",
map_id: ''
}
},
mounted: function(){
this.mapID = this.map_id;
this.allReport()
},
components: {
'addmap': addmap
},
computed: {
mapID: {
get: function(){
return this.map_id;
},
set: function(newValue){
this.map_id = newValue.toUpperCase();
}
}
},
methods: {
hello: function(val){
console.log(val)
},
allReport: function(){
axios.get('/reports').then(response => {
this.reports = response.data
});
}
}
}
Every time I load this view, it triggers an infinite loop in the console. I cannot figure out why this is happening.
If I simply print text in the loop, everything works fine. However, when I try to call a function within each loop iteration, it leads to an infinite loop.
I am looking for any suggestions or recommendations on how to fix this issue. Any help would be greatly appreciated. Thank you.