Home » vue » vue.js and laravel simple form submission with vuetify

vue.js and laravel simple form submission with vuetify

Posted by: admin November 26, 2021 Leave a comment

Questions:

Hello everyone I just used vuetify yesterday and it seems like I’m having an error with a axios.post form submission. I’m confused on what seems to be the error on this code. It is mostly the same with my previous project except with vuetify this time.

Here is my code.

Template My component.vue template field.

<template>
  <v-card>
    <v-card-title>
      <v-text-field
        v-model="search"
        append-icon="search"
        label="Search"
        single-line
        hide-details
      ></v-text-field>
    </v-card-title>
    <v-data-table
      :headers="headers"
      :items="departments"
      :search="search"
      :items-per-page="5"
    >
    <template v-slot:top>
      <v-toolbar flat color="white">
        <v-toolbar-title>Department</v-toolbar-title>
        <v-spacer></v-spacer>
        <v-dialog v-model="dialog" max-width="500px" persistent>
          <template v-slot:activator="{ on }">
            <v-btn color="primary" dark class="mb-2" v-on="on">Add Department</v-btn>
          </template>
          <v-card>
            <v-card-title>
              <span class="headline">{{ formTitle }}</span>
            </v-card-title>

            <v-form @submit.prevent="save()">
            <v-card-text>
              <v-container>
                <v-row>
                  <v-col cols="12" sm="12" md="12">
                    <v-text-field v-model="department" label="Department Name"></v-text-field>
                  </v-col>
                </v-row>
              </v-container>
            </v-card-text>

            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn color="blue darken-1" text @click="close()">Cancel</v-btn>
              <v-btn type="submit" color="blue darken-1" text>Save</v-btn>
            </v-card-actions>
            </v-form>
          </v-card>
        </v-dialog>
      </v-toolbar>
    </template>
    <template v-slot:item.action="{ item }">
      <v-icon small class="mr-2" @click="editItem(item)">edit</v-icon>
      <v-icon small @click="deleteItem(item.id)">delete</v-icon>
    </template>
    <template v-slot:no-data>
      <v-btn color="primary" @click="initialize()">Reset</v-btn>
    </template>
    </v-data-table>
  </v-card>
</template>

Script My component.vue script field.

   <script>
  export default {
    data: () => ({
      search: '',
      departments: [],
      department: '',
      dialog: false,
      headers: [
        {
          text: 'Department Name',
          align: 'left',
          sortable: true,
          value: 'department_name',
        },
        { text: 'Created By', value: 'department.created_at' },
        { text: 'Created At', value: 'department.created_at' },
        { text: 'Actions', value: 'action', sortable: false },
      ],
      editedIndex: -1,
      editedItem: {
        name: '',
      },
      defaultItem: {
        name: '',
      },
    }),

    computed: {
      formTitle() {
        return this.editedIndex === -1 ? 'New Item' : 'Edit Item'
      },
    },

    watch: {
      dialog(val) {
        val || this.close()
      },
    },

    created() {
      this.initialize()
    },

    methods: {
      initialize() {
        axios
        .get('/api/departments')
        .then(response => this.departments = response.data)
        .catch(error => console.log(error))
      },
      editItem (item) {
        this.dialog = true
        this.editedIndex = this.departments.indexOf(item)
        this.editedItem = Object.assign({}, item)
      },
      deleteItem(id) {
        if(confirm('Are you sure you want to delete this item?') && this.departments.splice(index, 1)) {
          axios
          .delete(`/api/department/${id}`)
          .then(response => this.initialize())
          .catch(error => console.log(error))   
        }
      },
      close() {
        this.dialog = false
        setTimeout(() => {
          this.editedItem = Object.assign({}, this.defaultItem)
          this.editedIndex = -1
        }, 300)
      },
      save() {
          axios
          .post('/api/department', {
                      department: department,
          })
          .then(response => this.initialize())
          .catch(error => console.log(error))

        this.close()
      },
    },
  }
</script>

Controller

 public function store(Request $request) {

    $request->validate ([
      'department' => 'required',
    ]);

    $department = Department::updateOrCreate([
      'department_name' => $request->department
    ]);

    return response()->json([
      'message' => 'Add Success'
    ], 200);
  }
Answers:

in save method you need to change department to this.department that is inside your block scope

save() {
    axios.post('/api/department', {
         department: this.department,
    })
}

Update

Based on @Ohgodwhy suggestion:

save() {
    const { department } = this

    axios.post('/api/department', { department })
}