vue.js and laravel simple form submission with vuetify

Question

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

SergkeiM · Accepted Answer · 2019-12-13 08:28:00Z

2

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

edited Dec 13, 2019 at 8:28

answered Dec 13, 2019 at 7:59

SergkeiM

4,1886 gold badges40 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

SergkeiM Over a year ago

@JimERussel happens :)

Ohgodwhy Over a year ago

You could also clean it up a little bit with some destructuring: const { department } = this, then { department } is your argument.

Jim E Russel Over a year ago

Could you please provide an example based on my code?

SergkeiM Over a year ago

@JimERussel updated my answer with Ohgodwhy suggestion

Jim E Russel Over a year ago

Thank you guys! Can I ask a bonus question? How do I use the @store controller for both post and put method usiong axios in laravel? I still haven't done the edit method for this and I don't know how. Sorry.

Collectives™ on Stack Overflow

vue.js and laravel simple form submission with vuetify

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related