How to add a static object with the autocomplete in VueJS?

Hi Friends 👋,

Welcome To SortoutCode! ❤️

To add the autocomplete in vuejs. we are going to use the vuejs-auto-complete package. We are going to see how to set up and how to use this package.

Today I am going to show you How you add a static object with the autocomplete in VueJS?

Table of contains

• Setup the Vue.js
• Create FirstComponent.vue and import it into App.js
• Install the vuejs-auto-complete package
• Add autocomplete component to your app

Let’s start today’s tutorial How do I add a static object with the autocomplete in VueJS?

Setup the Vue.js

First, we have to install the Vue project, I had installed the vueJS in my system. If you haven’t installed or have any problem with installation you can follow this article, which will show you step by step process of installation.

How to Install the VueJS project?

Create FirstComponent.vue and import it into App.js

Create the new component in the src/components/ components folder. the component name is FirstComponent.vue and imported into the App.js file:

App.js

<template>
  <div id="app">
    <FirstComponent />
  </div>
</template>

<script>
import FirstComponent from "./components/FirstComponent.vue";
export default {
  name: "App",
  components: {
    FirstComponent,
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Install the vuejs-auto-complete package

To install the vuejs-auto-complete package into our app. we have to use the following command:

npm i vuejs-auto-complete

After the installation is complete, we have to add Autocomplete component to our app.

Add autocomplete component in our app

Let’s use the autocomplete component in our app. We are going to define the static array of objects, and show it in the autocomplete values. Let’s see the code example:

<template>
  <div style="width:800px; margin:0 auto;">
      <h1>Welcome to sortoutcode.com</h1>
        <autocomplete 
          :source="color">
        </autocomplete>
  </div>
</template>

<script>
import Autocomplete from 'vuejs-auto-complete'
export default {
    name: "FirstComponent",
    components: {
    Autocomplete
  },
  data() {
        return {
            color: [{ id: 1, name: 'Red' },
            { id: 2, name: 'Green' },
            { id: 3, name: 'Yellow' },
            { id: 4, name: 'White' },
            { id: 5, name: 'Blue' }],
        }
    },
};
</script>

For now, let’s check the output.

All the best 👍.