[Vue warn]: Property or method is not defined

Question

I'm trying to build a vue google map component using google maps and the plugin https://www.npmjs.com/package/vue2-google-maps. I have installed the plugin using npm , and I've got in working when my googleMap.vue component:

-->

        <!-- :center="{lat: 30.08674842, lng: -97.29304982}" -->
        <GmapMap
        :center="{lat: latitude, lng: longitude}"
        :zoom="15"
        map-type-id="terrain"
        style="width: 500px; height: 300px"
      >

      </GmapMap>
      </span>
      </v-flex>
    </v-container>
  </div>
</template>


<script>
  var latitute = 30.08674842
  var longitude = -97.29304982
  import {
    gmapApi
  } from 'vue2-google-maps'
  export default {
    // name:'myMap'
    latitute:latitute,
    longitude:longitude,
   }
<

when I run this I get:

 ERROR  [Vue warn]: Property or method "longitude" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

How can I fix this?

edit:

I changed the script component to:

<script>
  var latitute = 30.08674842
  var longitude = -97.29304982
  import {
    gmapApi
  } from 'vue2-google-maps'
  export default {
    data() {
            console.log('im in data')

      return {
        latitute: latitute,
        longitude: longitude
      } // name:'myMap'
    }
  }
</script>

no change - I'm getting the same error

edit2:

I changed the data component as above , and you can see that it is being read in the devtolls console. still no change with restarted computer. any thoughts on what to do next?

skirtle · Accepted Answer · 2019-06-09 18:13:19Z

1

You need to make your properties reactive data:

export default {
    data () {
        return {
            latitude: latitude,
            longitude: longitude
        }
    }

The object you're exporting is a Vue configuration object and only properties it recognises will have any effect. While it might be convenient to think of it as being like a class definition it really isn't. Unrecognised properties, like latitude and longitude, will just be discarded and won't end up as members of your component instances.

If you want something be available as this.blah you need to define blah as a prop, data property, computed property or method. Within the template the this. is implicit but the same rule applies.

Update: Corrected typo latitute which had been copied from the original code.

edited Jun 9, 2019 at 18:13

answered Jun 9, 2019 at 13:57

skirtle

29.3k4 gold badges49 silver badges63 bronze badges

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

2 Comments

skirtle Over a year ago

@user61629 This really should fix it. My guess would be that either you have a caching problem or you have another component with the same mistake. I suggest putting some console logging inside the data function to confirm that it is being called.

skirtle Over a year ago

@user61629 The new error that you've posted is slightly different from the original error. Note that it references latitude rather than longitude. This is because latitude has been spelt incorrectly as latitute. You'll need to fix that typo wherever it appears in your code.

Collectives™ on Stack Overflow

[Vue warn]: Property or method is not defined

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related