Implementing the Vue JS Tag Component

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