Vue.Js Retrieve data from database to fill input using datalist

Question

I'm doing a project using Laravel 8 and Vue 3, and I have a Student Component. There is in it, a datalist to find the students that are already created, and I would like, when I select a student, that it fills my fields with the data that is in my database.

I already tried thigs with vueJs and v-model, but I only get the string that is in the input of the datalist. I also had some issues when I try to retrieve the data that I have [object Object] in my field or in the datalist input.

So there is my code :

//This is the data of my trainees which are my students
 data() {
        return {
            trainees: [],
          },
          //And this is the method that I use to retrieve the student from the database
  methods: {
     getTrainee() {
            axios.get(AXIOS + 'trainee')
                .then(response => this.trainees = response.data)
                .catch(error => console.log(error));
        },
  },

<!--This is a part of my student component, this is the datalist where I can find my students-->
 
 <div class="search_trainee">
            <input id="search" class="search_trainee_input" list="trainees" placeholder=" "
                   type="text">
            <label class="label_search" for="search">Search a trainee</label>
            <datalist  id="trainees">
                <option v-for="user in trainees" :key="user.id">
                    {{ user.firstname }} {{ user.lastname }}
                </option>
            </datalist>
        </div>
        
  <!--This is the other part in my Student component, this is the part where I want my input and filed to be fill with the data of the student I pick-->

        <div class="form_trainee">
            <h3 class=" title_form">Add a trainee</h3>
            <div class="row g-3">
                <div class="col-md-6">
                    <input id="lastname" ref="lastname" class="form-control" name="lastname" placeholder=" "
                           type="text" @blur.prevent="addTrainee();displayAudit()">
                    <label class="label_form" for="lastname">Lastname</label>
                </div>
                <div class="col-md-6">
                    <input id="firstname" ref="firstname" class="form-control" name="firstname" placeholder=" "
                           type="text" @blur.prevent="update">
                    <label class="label_form" for="firstname">Firstname</label>
                </div>
                <div class="col-md-6">
                    <input id="email" ref="email" class="form-control" name="email" placeholder=" " type="email"
                           @blur.prevent="update">
                    <label class="label_form" for="email">Email</label>

                </div>
                <div class="col-md-6">
                    <input id="company" ref="company" class="form-control" name="company" placeholder=" "
                           type="text"
                           @blur.prevent="update">
                    <label class="label_form" for="company">Company</label>

                </div>
                <div class="col-md-6">
                    <input id="vehicle" ref="vehicle" class="form-control" name="vehicle" placeholder=" "
                           type="text"
                           @blur.prevent="update">
                    <label class="label_form" for="vehicle">Vehicle</label>

                </div>
                <div class="col-md-6">
                    <input id="location" ref="location" class="form-control" name="location" placeholder=" "
                           type="text"
                           @blur.prevent="update">
                    <label class="label_form" for="location">Location</label>

                </div>
                <div class="col-md-6">
                    <select id="instructor_id" ref="instructor_id" v-model="instructor" class="form-control"
                            name="instructor_id"
                            @blur.prevent="update">
                        <option value="">--Choose an instructor--</option>
                        <option v-for="user in instructors" :key=user.id v-bind:value="{id:user.id}">{{
                                user.firstname
                            }}
                            {{ user.lastname }}
                        </option>
                    </select>
                </div>
                <div class="col-md-6">
                    <select id="acpCenter" ref="acp_center_id" v-model="acpCenter" class="form-control" name="acpCenter"
                            @blur.prevent="update">
                        <option value="">--Choose an Acp Center--</option>
                        <option v-for="center in acpCenters" :key="center.id" v-bind:value="{id:center.id}">
                            {{ center.city }} {{ center.postal_code }}
                        </option>
                    </select>
                </div>
            </div>
        </div>

Any help or advice or tip is welcome, I can provide more code if neccessary. Thanks for your time.

Answer 1

Actually, the datalist don't have event handlers in vuejs. Hence it becomes difficult to achieve what you're trying to achieve. Why don't you give vue-select a try? it's pretty simple to use and it's very easy to handle the events.

Here's a demo for you:

Vue.component('v-select', VueSelect.VueSelect)

new Vue({
  el: "#app",
  data() {
    return {
      selectedStudent: "",
      acpCenter: "",
      instructor: "",
      instructors: [
        { id: 10, firstname: "instructor1", lastname: "lastname" },
        { id: 11, firstname: "instructor2", lastname: "lastname" },
        { id: 12, firstname: "instructor3", lastname: "lastname" }
      ],
      acpCenters: [
        { id: 10, city: "city", postalCode: "postalCode" },
        { id: 11, city: "city2", postalCode: "postalCode" },
        { id: 12, city: "city3", postalCode: "postalCode" }
      ],
      trainees: []
    };
  },
  mounted() {
    this.getTrainee();
  },
  //And this is the method that I use to retrieve the student from the database
  methods: {
    getTrainee() {
      this.trainees = [
        {
          id: 10,
          firstname: "Ben",
          lastname: "Alphonso",
          company: "company",
          vehicle: "vehicle",
          location: "location",
          email: "something.1@email.com"
        },
        {
          id: 11,
          firstname: "Carry",
          lastname: "Menati",
          company: "company",
          vehicle: "vehicle",
          location: "location",
          email: "something.2@email.com"
        },
        {
          id: 13,
          firstname: "Bruce",
          lastname: "Wayne",
          company: "Wayne Enterprises",
          vehicle: "vehicle",
          location: "location",
          email: "something.2@email.com"
        }
      ];
    },

    onInput(val) {
      if (!val) if (!val) this.selectedStudent = { firstname: "" };
    },

    addTrainee() {
      return false;
    },
    displayAudit() {
      return false;
    },
    update() {
      return true;
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vue-select@latest"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-select@latest/dist/vue-select.css">

<div id="app">
  <template>
  <div class="container">
    <div class="search_trainee">
      <v-select
        v-model="selectedStudent"
        @input="onInput"
        label="firstname"
        :options="trainees"
      ></v-select>
    </div>

    <!--This is the other part in my Student component, this is the part where I want my input and filed to be fill with the data of the student I pick-->

    <div class="form_trainee">
      <h3 class="title_form">Add a trainee</h3>
      <div class="row g-3">
        <div class="col-md-6">
          <input
            id="lastname"
            ref="lastname"
            class="form-control"
            name="lastname"
            v-model="selectedStudent.lastname"
            placeholder=" "
            type="text"
          />
          <label class="label_form" for="lastname">Lastname</label>
        </div>
        <div class="col-md-6">
          <input
            id="firstname"
            ref="firstname"
            class="form-control"
            name="firstname"
            v-model="selectedStudent.firstname"
            placeholder=" "
            type="text"
            @blur.prevent="update"
          />
          <label class="label_form" for="firstname">Firstname</label>
        </div>
        <div class="col-md-6">
          <input
            id="email"
            ref="email"
            class="form-control"
            name="email"
            placeholder=" "
            v-model="selectedStudent.email"
            type="email"
            @blur.prevent="update"
          />
          <label class="label_form" for="email">Email</label>
        </div>
        <div class="col-md-6">
          <input
            id="company"
            ref="company"
            class="form-control"
            name="company"
            placeholder=" "
            v-model="selectedStudent.company"
            type="text"
            @blur.prevent="update"
          />
          <label class="label_form" for="company">Company</label>
        </div>
        <div class="col-md-6">
          <input
            id="vehicle"
            ref="vehicle"
            class="form-control"
            name="vehicle"
            placeholder=" "
            v-model="selectedStudent.vehicle"
            type="text"
            @blur.prevent="update"
          />
          <label class="label_form" for="vehicle">Vehicle</label>
        </div>
        <div class="col-md-6">
          <input
            id="location"
            ref="location"
            class="form-control"
            name="location"
            placeholder=" "
            v-model="selectedStudent.location"
            type="text"
            @blur.prevent="update"
          />
          <label class="label_form" for="location">Location</label>
        </div>
        <div class="col-md-6">
          <select
            id="instructor_id"
            ref="instructor_id"
            v-model="instructor"
            class="form-control"
            name="instructor_id"
            @blur.prevent="update"
          >
            <option value="">--Choose an instructor--</option>
            <option
              v-for="user in instructors"
              :key="user.id"
              v-bind:value="{ id: user.id }"
            >
              {{ user.firstname }}
              {{ user.lastname }}
            </option>
          </select>
        </div>
        <div class="col-md-6">
          <select
            id="acpCenter"
            ref="acp_center_id"
            v-model="acpCenter"
            class="form-control"
            name="acpCenter"
            @blur.prevent="update"
          >
            <option value="">--Choose an Acp Center--</option>
            <option
              v-for="center in acpCenters"
              :key="center.id"
              v-bind:value="{ id: center.id }"
            >
              {{ center.city }} {{ center.postalCode }}
            </option>
          </select>
        </div>
      </div>
    </div>
  </div>
</template>
</div>

Note, this is a browser version. The way you import this into your local nodejs project is:

1. yarn add vue-select or npm install vue-select to install dependency
2. import the vue-select component and css like so:

<script>
import Vue from "vue";
import vSelect from "vue-select";
import "vue-select/dist/vue-select.css";
Vue.component("v-select", vSelect);
</script>

Final code in your app.vue or something.vue file, will look like this:

<template>
  <div class="container">
    <div class="search_trainee">
      <v-select
        v-model="selectedStudent"
        @input="onInput"
        label="firstname"
        :options="trainees"
      ></v-select>
    </div>

    <!--This is the other part in my Student component, this is the part where I want my input and filed to be fill with the data of the student I pick-->

    <div class="form_trainee">
      <h3 class="title_form">Add a trainee</h3>
      <div class="row g-3">
        <div class="col-md-6">
          <input
            id="lastname"
            ref="lastname"
            class="form-control"
            name="lastname"
            v-model="selectedStudent.lastname"
            placeholder=" "
            type="text"
          />
          <label class="label_form" for="lastname">Lastname</label>
        </div>
        <div class="col-md-6">
          <input
            id="firstname"
            ref="firstname"
            class="form-control"
            name="firstname"
            v-model="selectedStudent.firstname"
            placeholder=" "
            type="text"
            @blur.prevent="update"
          />
          <label class="label_form" for="firstname">Firstname</label>
        </div>
        <div class="col-md-6">
          <input
            id="email"
            ref="email"
            class="form-control"
            name="email"
            placeholder=" "
            v-model="selectedStudent.email"
            type="email"
            @blur.prevent="update"
          />
          <label class="label_form" for="email">Email</label>
        </div>
        <div class="col-md-6">
          <input
            id="company"
            ref="company"
            class="form-control"
            name="company"
            placeholder=" "
            v-model="selectedStudent.company"
            type="text"
            @blur.prevent="update"
          />
          <label class="label_form" for="company">Company</label>
        </div>
        <div class="col-md-6">
          <input
            id="vehicle"
            ref="vehicle"
            class="form-control"
            name="vehicle"
            placeholder=" "
            v-model="selectedStudent.vehicle"
            type="text"
            @blur.prevent="update"
          />
          <label class="label_form" for="vehicle">Vehicle</label>
        </div>
        <div class="col-md-6">
          <input
            id="location"
            ref="location"
            class="form-control"
            name="location"
            placeholder=" "
            v-model="selectedStudent.location"
            type="text"
            @blur.prevent="update"
          />
          <label class="label_form" for="location">Location</label>
        </div>
        <div class="col-md-6">
          <select
            id="instructor_id"
            ref="instructor_id"
            v-model="instructor"
            class="form-control"
            name="instructor_id"
            @blur.prevent="update"
          >
            <option value="">--Choose an instructor--</option>
            <option
              v-for="user in instructors"
              :key="user.id"
              v-bind:value="{ id: user.id }"
            >
              {{ user.firstname }}
              {{ user.lastname }}
            </option>
          </select>
        </div>
        <div class="col-md-6">
          <select
            id="acpCenter"
            ref="acp_center_id"
            v-model="acpCenter"
            class="form-control"
            name="acpCenter"
            @blur.prevent="update"
          >
            <option value="">--Choose an Acp Center--</option>
            <option
              v-for="center in acpCenters"
              :key="center.id"
              v-bind:value="{ id: center.id }"
            >
              {{ center.city }} {{ center.postalCode }}
            </option>
          </select>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import vSelect from "vue-select";
import "vue-select/dist/vue-select.css";
Vue.component("v-select", vSelect);

export default {
  name: "TodoList",
  data() {
    return {
      selectedStudent: "",
      acpCenter: "",
      instructor: "",
      instructors: [
        { id: 10, firstname: "instructor1", lastname: "lastname" },
        { id: 11, firstname: "instructor2", lastname: "lastname" },
        { id: 12, firstname: "instructor3", lastname: "lastname" }
      ],
      acpCenters: [
        { id: 10, city: "city", postalCode: "postalCode" },
        { id: 11, city: "city2", postalCode: "postalCode" },
        { id: 12, city: "city3", postalCode: "postalCode" }
      ],
      trainees: []
    };
  },
  mounted() {
    this.getTrainee();
  },
  //And this is the method that I use to retrieve the student from the database
  methods: {
    getTrainee() {
      this.trainees = [
        {
          id: 10,
          firstname: "Ben",
          lastname: "Alphonso",
          company: "company",
          vehicle: "vehicle",
          location: "location",
          email: "something.1@email.com"
        },
        {
          id: 11,
          firstname: "Carry",
          lastname: "Menati",
          company: "company",
          vehicle: "vehicle",
          location: "location",
          email: "something.2@email.com"
        },
        {
          id: 13,
          firstname: "Bruce",
          lastname: "Wayne",
          company: "Wayne Enterprises",
          vehicle: "vehicle",
          location: "location",
          email: "something.2@email.com"
        }
      ];
    },

    onInput(val) {
      if (!val) this.selectedStudent = { firstname: "" };
    },

    addTrainee() {
      return false;
    },
    displayAudit() {
      return false;
    },
    update() {
      return true;
    }
  }
};
</script>