[Vue warn]: Property or method "markers" is not defined on the instance but referenced during render

Question

I'm building a vue and leaflet application and I keep getting this error.

[Vue warn]: Property or method "markers" is not defined on the instance but referenced during render.

I can't find the problem, both the names in the variable and the code are spelled correctly and they are all in the same component.

(note: this is not a duplicate of [Vue warn]: Property or method is not defined on the instance but referenced during render as mine is in a single file component and also the answers there didn't help me)

here is my code

<template>
  <div class="containerTest">
    <div style="height: 80vh">
    <LMap :zoom="zoom" :center="center">
      <LTileLayer :url="url"></LTileLayer>
      <l-marker
        :key="index"
        v-for="(brew, index) in markers"
        :lat-lng="latLng(brew.latitude, brew.longitude)"


      ></l-marker>
      <!-- <LMarker :lat-lng="[47.413220, -1.219482]"></LMarker>
      <LMarker :lat-lng="[46.193220, 4.82]"></LMarker>
      <LMarker :lat-lng="[45.193220, 6.82]"></LMarker>
      <LMarker :lat-lng="[47.03220, -0.9482]"></LMarker>
      <LMarker :lat-lng="[46.03220, 2.9482]"></LMarker> -->
    </LMap>
  </div>
  </div>

</template>
      
<script>

import { LMap, LTileLayer, LMarker } from "vue2-leaflet";

export default {
  name: "Map",
  data: function () {
    return {
      markers: []
    }
  },
  components: {
    LMap,
    LTileLayer,
    LMarker
  },
  data() {
    return {
      url: "https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=CFmlXsYmVozAdWKEtdT5",
      zoom: 6,
      center: [46.5322, 2.9482],
      bounds: null
    };
  },
  mounted: function () {
    fetch('https://api.openbrewerydb.org/breweries').then((response) => {
      return response.json();
    }).then(json=>{
        this.brews = json
        console.log(this.brews)
    })
  },
  methods: {
    latLng: function(lat, lng) {
      return L.latLng(lat,lng);
    },
  }
};
</script>

Michal's got it, move `markers: []` into the second `data()` declaration and delete the first. As soon as you do that, the error disappears. — zcoop98, Jun 30 '21 at 16:45
This question or the answer is not useful for any other user of SO and should be deleted after my 1st comment.... — Michal Levý, Jun 30 '21 at 17:41

score 1 · Accepted Answer · answered Jun 30 '21 at 16:56

You've got a typo: you've declared data twice.

Move markers into the second data declaration and remove the first, and it'll work fine, that's the only thing going wrong here:

Vue.component('l-map', window.Vue2Leaflet.LMap);
Vue.component('l-tile-layer', window.Vue2Leaflet.LTileLayer);
Vue.component('l-marker', window.Vue2Leaflet.LMarker);

new Vue({
  el: '#app',
  name: "Map",
  /*data: function () { // Duplicate data declaration
    return {
      markers: [] <--- Move this down into data() vvv
    }
  },*/
  data() {
    return {
      url: "https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=CFmlXsYmVozAdWKEtdT5",
      zoom: 6,
      center: [46.5322, 2.9482],
      bounds: null,
      markers: [] // <--- Correct Markers location
    };
  },
  mounted: function() {
    fetch('https://api.openbrewerydb.org/breweries').then((response) => {
      return response.json();
    }).then(json => {
      this.brews = json
      //console.log(this.brews);
    })
  },
  methods: {
    latLng: function(lat, lng) {
      return L.latLng(lat, lng);
    },
  }
});

<!-- Vue2 and Vue2-Leaflet CDN Imports -->
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script><link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" /><script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script><script src="https://unpkg.com/vue2-leaflet@2.7.1/dist/vue2-leaflet.min.js"></script>

<div id="app" class="containerTest">
  <div style="height: 80vh">
    <l-map :zoom="zoom" :center="center">
      <l-tile-layer :url="url"></l-tile-layer>
      <l-marker
        :key="index"
        v-for="(brew, index) in markers"
        :lat-lng="latLng(brew.latitude, brew.longitude)"
      ></l-marker>
      <l-marker :lat-lng="[47.413220, -1.219482]"></l-marker>
      <l-marker :lat-lng="[46.193220, 4.82]"></l-marker>
      <l-marker :lat-lng="[45.193220, 6.82]"></l-marker>
      <l-marker :lat-lng="[47.03220, -0.9482]"></l-marker>
      <l-marker :lat-lng="[46.03220, 2.9482]"></l-marker>
    </l-map>
  </div>
</div>

[Vue warn]: Property or method "markers" is not defined on the instance but referenced during render

1 Answers1