Dave Follett Nov 2 Originally published at davefollett.io on Nov 02, 2018
🔑 Vue Concepts
v-modeldirective to create two-way data bindings on form input
- Computed Properties
🏗️ Vue Implementation
- The HTML section was placed inside the root
citiesvariables were placed into the
numberWithCommas()function was placed into the
displayMatches()functions were placed into the
fetch()call that executed on page load was placed into the
watchsection was not needed so it was removed
<style>section was removed because the stylesheet was pulled in with a
Whew, there was a lot going on there but if you have been reading the previous articles, hopefully it’s familiar 😀. Unfortunately, we have quite a bit of work still left to do to get this working. The next step is to adjust the
displayMatches() computed property to return an object for each city instead of an HTML list item.
This will make it easier to loop the results of the
displayMatches computed property within the HTML area, shown later. Next, I added a
v-model directive to create a two-way data bindings on form input to the
searchValue variable that I added to the data section.
The last set of changes are numerous and all inside the HTML area. Let’s first take a look at it in full and then break it down.
<ul class="suggestions"> displayed default information and then as the user started typing, it was replaced with the matching city information. To do this with Vue, I inserted a
v-else block within
<ul class="suggestions"> to conditionally render the matching city information when
searchValue is truthy and the default information when
searchValue is falsy. You will probably notice I attached the
v-else directives to
<template> elements. I did this because Vue directives must be attached to a single element and
<template> elements will not be rendered in the Document Object Model (DOM). Within the
displayMatches computed property with a
v-for directive. On the
<span class="name"> element you will see that I used the
v-html directive. This was needed because the
displayMatches computed property contains strings of HTML and the
v-html directive will interpret them as HTML instead of plain text. Finally, the last step was to fill in the
If you were able to follow and make any sense of all that, please pat yourself on the back and accept this major award: 🏆.
🏁 Putting It All Together
v-html directive and the use of
v-else directives with
- For more information about conditional rendering and using the
<template>element as an invisible wrapper, you can read about it here in the Official Vue Documentation.
- For more information about the
v-htmldirective, you can read about it here in the Official Vue Documentation.
🔜 Up Next