store results from method in data form

Question

I am going to preface this with I have NOT done this in a LONG time and my mind is mud. So no picking on me just remind me what I am doing wrong or not remembering.

NOTE: This is VueJS 3 / Tailwind 3 inside a Laravel 9 Jetstream Project

I have a method...

locatorButtonPressed() {
                navigator.geolocation.getCurrentPosition(
                    position => {
                        console.log(position.coords.latitude);
                        console.log(position.coords.longitude);
                    },
                    error => {
                        console.log(error.message);
                    },
                )
            },

and I have a form data

data() {
            return {
                form: this.$inertia.form({
                    name: '',
                    email: '',
                    password: '',
                    password_confirmation: '',
                    birthdate: '',
                    user_latitude: '',
                    user_longitude: '',
                    user_city: '',
                    user_region: '',
                    user_country: '',
                    location: '',
                    terms: false,
                })
            }
        }

I want to store position.coords.latitude and position.coords.longitude from the method in the form Data under user_latitude and user_longitude respectfully.

What am I forgetting???

Answer 1

The data properties can be accessed via this.PROPERTY_NAME. For example, to set form.user_latitude, use this.form.user_latitude = newValue.

export default {
  methods: {
    locatorButtonPressed() {
      navigator.geolocation.getCurrentPosition(
           position => {
             this.form.user_latitude = position.coords.latitude;
             this.form.user_longitude = position.coords.longitude;
           })
    },
  }
}

demo