Implementing the Vue JS Tag Component

Part 26 of 48 in API Driven Development With Laravel and VueJS
Dan Pastori avatar
Dan Pastori November 30th, 2017
⚡️ Updated content is available We learned a lot since we originally wrote this article. We now have this updated for Laravel 8, Vue/NuxtJS, and Capacitor.

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

Keep Reading
View the course View the Course API Driven Development With Laravel and VueJS
Up Next → Vue JS Tag input

Support future content

The Ultimate Guide to Building APIs and Single-Page Applications with Laravel + VueJS + Capacitor book cover.

Psst... any earnings that we make off of our book is being reinvested to bringing you more content. If you like what you read, consider getting our book or you can buy us a beer.

Written By Dan

Dan Pastori avatar Dan Pastori

Builder, creator, and maker. Dan Pastori is a Laravel certified developer with over 10 years experience in full stack development. When you aren't finding Dan exploring new techniques in programming, catch him at the beach or hiking in the National Parks.

Like this? Subscribe

We’re privacy advocates. We will never spam you and we only want to send you emails that you actually want to receive. One-click unsubscribes are instantly honored.

What topics are you interested in?
Are you interested in our upcoming book?