InertiaJS & Laravel misc

< Previous
22/24
Next >

Create a searchable select field with InertiaJS and vue multiselect

1.
Determining active routes
05:24
2.
Create a searchable list
09:05
3.
Handling regular forms
16:41
4.
Toast notifications
17:32
5.
Inline forms validation
09:15
6.
Authorization
08:45
7.
Structuring layouts
10:43
8.
Infinite scrolling with InertiaJs and Laravel
15:57
9.
Toggling likes
13:27
10.
Notifications with Laravel Echo and Pusher in InertiaJS applications (part one)
14:47
11.
Realtime Notifications with Laravel Echo and Pusher in InertiaJS applications (part two)
09:07
12.
Building a user following / unfollowing system with Laravel and InertiaJS
22:39
13.
Changing button labels on hover and InertiaJS progress indicators
05:34
14.
Building the home feed and infinite scroll component with Laravel and InertiaJS
17:52
15.
Building a form component to post new tweets with Laravel and InertiaJS
19:38
16.
Media attachments with Laravel and InertiaJS
41:46
17.
Avatar image input component with VueJS, Inertia, and Tailwind CSS
14:44
18.
Bugfixing the avatar input component
04:16
19.
New InertiaJs form helper - less boilerplate, more awesomeness
08:30
20.
InertiaJS scroll management
13:34
21.
InertiaJS submitting form arrays and error handling
11:46
22.
Create a searchable select field with InertiaJS and vue multiselect
13:10
23.
InertiaJS data evaluation in Laravel and VueJS applications
04:37
24.
Customize the default Jetstream view responses in Laravel apps using the Inertia stack
03:46

Create a searchable select field with InertiaJS and vue multiselect

  1. Install vue-multiselect
npm install vue-multiselect --save
  1. Import and register the Multiselect component
import Multiselect from 'vue-multiselect';

export default {
  components: {Multiselect}
}
  1. Import the styles in your app.css file
@import "../../node_modules/vue-multiselect/dist/vue-multiselect.min.css";
  1. Prepare your InertiaJS form
export default {
  data() {
    return {
      form: this.$inertia.form({
        mechanic_id: '',
        // other fields
      })
    }
  }
}
  1. Add the multiselect directive in your template and setup it's options, property to be used as label, an unique property for track-by to identify each option, and listen to the @search-change and @input events.
<template>
  <form>
    <label for="mechanic_id">Mechanic</label> 
    <multiselect 
      v-model="selectedMechanic"
      id="mechanic_id" placeholder="Search mechanic" 
      :options="mechanics" label="name" track-by="id"
      @search-change="onSearchMechanicsChange"
      @input="onSelectedMechanic"
      />
  </form>
</template>
  1. Define the above properties and methods. mechanics will come from the server, so it will be defined as a prop with an empty array as default, while onSearchMechanicsChange and onSelectedMechanic will defined as methods.
export default {
  props: {
    mechanics: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      selectedMechanic: undefined,
      form: this.$inertia.form({
        mechanic_id: '',
        // other fields
      })
    }
  },
  methods: {
    onSearchMechanicsChange(term) {
      this.$inertia.get('/jobs/create', {term}, {
        preserveState: true,
        preserveScroll: true,
        replace: true
      })
    },
    onSelectedMechanic(consultant) {
      this.form.consultant_id = consultant.id;
    },
  }
}

The reason why we set the multiselect v-model to selectedMechanic and not form.mechanic_id is because the multiselect component expects its v-model to be an element from the mechanics array we pass in as options.

The onSearchMechanicsChange will make an inertia call to the server while passing the entered term in the search field. We also need to make sure the local state and scroll will stay the same, so we'll instruct inertia to preserveState and preserveScroll.

Since the search request will fire multiple times, we also want to replace the current request in the browser history such that when we browse back, we browse to the previous page, and not to the previous term that was typed in the search box.

Lastly, the onSelectedMechanic will set the form.consultant_id to the id of the selected mechanic.

Create an account to view the code snippets of this episode.

Login Free registration