以数据形式存储方法的结果

Question

我将以我已经很长时间没有这样做了，我的脑子里一片混乱作为序言。所以不要挑剔我只是提醒我我做错了什么或不记得了。

注意：这是 Laravel 9 Jetstream 项目中的 VueJS 3 / Tailwind 3

我有一个方法...

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

我有一个表单数据

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,
                })
            }
        }

我想将方法中的 position.coords.latitude 和 position.coords.longitude 存储在 user_latitude 和 user_longitude 下的数据表单中。

我忘记了什么？？？

Answer 1

可以通过 this.PROPERTY_NAME 访问数据属性。例如，要设置 form.user_latitude，请使用 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

以数据形式存储方法的结果

store results from method in data form

laravel

vue.js

google-maps

tailwind-css

jetstream