Getting editMode to be true

I'm not sure if this is an ok way to do inertia, but the issue I'm having is that I'm trying to get editMode to be true after posting a form but it is still saying false.

<script>
import AppLayout from '../../Layouts/AppLayout.vue';
import {useForm} from "@inertiajs/vue3";
import InputLabel from "../../../../vendor/laravel/jetstream/stubs/inertia/resources/js/Components/InputLabel.vue";
import TextInput from "../../../../vendor/laravel/jetstream/stubs/inertia/resources/js/Components/TextInput.vue";


export default {
    components: {
        AppLayout,
        useForm,
        InputLabel,
        TextInput
    },
    props: [],
    data(){
        return {
            editMode: false,
            form: {
                name: null,
                description: null,
            }
        }
    },
    methods: {
        save(){
            axios.post('/create', this.form).then(response => {
                this.editMode = true
            })
        }
    }
}
</script>

vincent15000

3 years ago

Level 63

What do you have in the console with this ?

save(){
	console.log(this.editMode);
    axios.post('/create', this.form).then(response => {
        this.editMode = true
		console.log(this.editMode);
    })
	console.log(this.editMode);
}

pom

3 years ago

Level 21

You're importing the Form Helper but not using it. Try this:

export default {
  data() {
    return {
      form: useForm({
        name: null,
        description: null,
      }),
    }
  },
}

Then inside your save method.

form.post('/create', {
  onFinish: () => this.editMode = true,
})

1 like

vincent15000

3 years ago

Level 63

@pom Even if he doesn't use useForm, that has no effect on the editMode variable.

Please or to participate in this conversation.