The field we are going to be creating is going to show us if the vehicles are available or not on our Vue.js frontend. I'm also going to show you how to create v-if condition without using any HTML elements in our Vue template.

In this episode we are going to create a new field in OctoberCMS and then display it in our Vue application.

Availability

In this episode we are going to be doing very similar things that we were doing in the [make the filter pretty episode](http://watch-learn.com/video-tutorials/theming-with-wp-rest-api-part-07-making-filters-pretty), that means that I will go a bit faster in this one, so if something is not clear to you please refer to that episode.

We are going to be using `v-if` statements to conditionally display parts of our preview and then we are going to be using vue `transition` and a bit of CSS to create those animations.

Since we finished creating our post previews let's now make them pretty using WP REST API and Vue.js.

Making Previews Pretty

We are not going to do anything in this tutorial with WordPress REST API, but instead we are going to take a few minutes to make our filters look pretty.

Also we are going to use `v-if` statements to hide and show certain elements on the page. And we are going to learn how to do transitions with Vue.js, using `transition` function.

In this tutorial we are going to take a few minutes to make our filters look decent using Vue.js, HTML and CSS.

Tutorials tagged with: v-if

Get in touch