Vue
Implementing the Vue JS Tag Component
Part 26 of 48 in API Driven Development With Laravel and VueJS
Dan Pastori
Implementing the Vue JS Tag Component Part 26 of 48 in API Driven Development With Laravel and VueJS

In the last tutorial we built a Vue JS tag component https://serversideup.net/vue-js-tag-input/. Now we have to implement the tagging component. We will be doing this on the NewCafe.vue page.

Step 1: Implement the Vue TagsInput component on the new Cafe page.

To do this, first open up /resources/assets/js/pages/NewCafe.vue. This is our form to add a new cafe and the locations.

On top of the page, we need to import the TagsInput component and the EventBus component:

import TagsInput from '../components/global/forms/TagsInput.vue';

/*
  Imports the Event Bus to pass events on tag updates
*/
import { EventBus } from '../event-bus.js';

Then we need to let the page know we are using the TagsInput Component like this:

components: {
  TagsInput
},

Now that we have the component imported, we will need to add a TagsInput to each of the location forms. So in the template for the page, right after the brew methods available section add this:

<div class="large-12 medium-12 small-12 cell">
  <tags-input v-bind:unique="key"></tags-input>
</div>

What this will do is import a tags input for each of the locations and bind the unique parameter to the key of the location. Now a tag input will be available for every location. We just have to make sure we have a place to save that data and send it along with requests to the API.

In the addLocation() method, when we create a new location, adjust the this.locations.push to be:

this.locations.push( { name: '', address: '', city: '', state: '', zip: '', methodsAvailable: [], tags: [] } );

This way we are saving the tags with the location.

Next, we need to listen to the tags-edited event that we created in our Tags Input. This event fires when the tags have been changed. We will register that on the mounted() lifecycle hook:

/*
  Sync the tags to send to the server for the new cafe.
*/
mounted(){
  EventBus.$on('tags-edited', function( tagsAdded ){
    this.locations[tagsAdded.unique].tags = tagsAdded.tags;
  }.bind(this));
},

When the tags have been edited, we grab the tags being sent from the input and add them to the specific location. Since we passed the key of the location as the unique parameter then, we can use that to set the tags on the specific location.

Finally, at the end of the clearForm() method, add the following event right before the call to add a location:

EventBus.$emit('clear-tags');

This will clear the tags when we submit a new form to add a cafe.

There’s a couple of steps to tie it all together, but once it’s set up the tagging works very smoothly!

Conclusion

Building the tagging API section definitely is complex and takes some time. However, with the last couple articles, I hope it shed a light on how to get started. If you need any further help, feel free to leave a comment below and I can definitely lend a hand. The next couple articles we will be adding some filters to our cafes both on the map and list views.

For now, check out the code here: https://github.com/serversideup/roastandbrew

About the Author
Builder, creator, and maker. Dan Pastori has over 10 years experience as a full stack developer. When you aren't finding Dan working on building a farm using Arduinos, catch him at the beach or hiking in the National Parks. Follow me on Twitter
More posts in this course
API Driven Development With Laravel and VueJS See The Entire Course
Keep ads off of this site!
We respect your privacy, and we mean it! If you enjoy our content, help us create more freely available content by making a contribution.
×

Want to know our top 5 tools for API Development?

Sign up now and we will send you our free e-book! You will also be the first to know when our API Driven Development course is launched!