It is your first day at a new job as a front-end engineer and you have been given a task to finish a contact management application.
This app was created with Vue CLI.
Follow these steps for correct application setup :
npm install
– install dependenciesnpm test
– run all tests (should fail unless you fix the app)npm run test:watch
– run all tests in watch modenpm run serve
– serve the app at http://localhost:8080/ (or at another port it8080
is unavailable)
All parts of the application have been written by the previous engineer except the following functionalities:
- Importing the contacts from
contacts.json
- Binding data variable contact to contact imported from
contacts.json
- Creating a data variable called query initialized to the empty string
- Two way binding data variable query to input field with the
id="search"
- Creating a search function to search through contacts by firstname and lastname
- Displaying contacts using
app-contacts
component and search results
You are expected to implement the following functionalities:
- Set variable contacts to be equal to
jsonContacts
. - Create a data variable called
query
and initialize it to the empty string. - Bind the
query
variable to the input field with theid="search"
- Create the computed getter function:
search()
> This function filters contacts by their first and last names, email and phone number based on a data variable named query and returns an array of the filtered contacts. - Bind the results of search to be displayed in
app-contacts
component.
- Deploy the application using a free service and provide a public URL
- Anything you want to add.
You are welcome to improvise or “fill in the gaps” when you think the specification is not exact enough.