[Vuejs]-Form input come as readonly on first load Vuejs

by

0👍

I have not seen your script codes but this may help.

<script>
import { ref } from 'vue'
export default {
    data(){
        return {
            values: [],
            form: {
               email: '',first_name: '',last_name: '',password : '',terms: '', password_confirmation: '', device_name: 'browser',
            },
            error:null,
           errors:[]
        }
    },
    methods:{
        registerUser(){
            axios.post('/register', this.form).then(response => {
                localStorage.setItem('user_data', response.data.token)
                this.$router.push({ name: 'Dashboard'})
            }).catch((error) => {
                this.errors = error.response.data.errors
                if (errors.response.status === 500) {
                 this.error = 'Something went Wrong, Please try Again'
            }
            })
        },        
    }    
}
</script>

this is my working code, in my case, just look on data(), something must be wrong there

UPDATE

since you updated your question this should be it

data() {
        return {
            form:{   //change this
                firstName: "",
                lastName: "",
                phone_number: "",
                password: "",
                password_confirmation: ""
            },

            login() {
                this.form.post("/api/auth/register",this.form).then((response =>{  //if it will not post change this line too.
                    console.log(response.data);
                    // window.location.href = '/home';
                });
            }
        };
    },

and remove mounted() and created(), you dont need them, since you dont mount anything in your application, when the application loads, they might be causing problems

Leave a comment