We can conditionally add classes to a Vue component by using the v-bind:class directive. The shorthand for that is :class.

For instance, we can add it as follows:

<template>
  <div id="app">
    <button @click="isRed = !isRed">Toggle</button>
    <div :class="{red: isRed, green: !isRed}">foo</div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return { isRed: false };
  }
};
</script>

<style>
.red {
  color: red;
}

.green {
  color: green;
}
</style>

In the code above, we have:

:class="{red: isRed, green: !isRed}"

to set the class according to the value of isRed. Since it’s false initially, the green class will be applied. Then when we click the Toggle button for the first, isRed becomes true, so the red class will be applied.

In the style section, we specified that the red class has color red and green class has color green, so the div’s text will toggle between red and green as we click the button.

We can move the object to a computed property so that our template won’t have too much code. To do that we can write the following:

<template>
  <div id="app">
    <button @click="isRed = !isRed">Toggle</button>
    <div :class="classObj">foo</div>
  </div>
</template>

<script>
export default {
  name: "App",
  computed: {
    classObj() {
      return { red: this.isRed, green: !this.isRed };
    }
  },
  data() {
    return { isRed: false };
  }
};
</script>

<style>
.red {
  color: red;
}

.green {
  color: green;
}
</style>

We moved the object that passed into the :class directive to the function inside the computed property as follows:

classObj() {
  return { red: this.isRed, green: !this.isRed };
}

The value of classObj will update when this.isRed is updated, so we’ll get the same result as before.

In both examples, we have one conditional class applied to the div in our Vue component at one time.

Array Syntax

We can also define an array of classes, with the class names as the entries of the array. The condition for which the class is applied will be in the data object as the value of the properties with the given class names.

For instance, we can write the following code to do that:

<template>
  <div id="app">
    <button @click="isRed = !isRed">Toggle</button>
    <div :class="[isRed ? red: '', !isRed ? green: '']">foo</div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return { isRed: false, red: "red", green: "green" };
  }
};
</script>

<style>
.red {
  color: red;
}

.green {
  color: green;
}
</style>

In the code above, we have:

{ isRed: false, red: "red", green: "green" }

to place the class names as variables. Then we conditionally apply them by writing:

[isRed ? red: '', !isRed ? green: '']

in the template. Therefore, we’ll see the same result as before since the conditions and classes are the same as before. It’s just that we used the array syntax instead of the object syntax.

Conditionally Applying Classes With Vue Components

We can apply the :class directive directly on our own components or 3rd party ones. To do that, we use the same syntax. For instance, we can write the following code to do that:

components/Foo.vue:

<template>
  <p>foo</p>
</template>

App.vue:

<template>
  <div id="app">
    <button @click="isRed = !isRed">Toggle</button>
    <Foo :class="[isRed ? red: '', !isRed ? green: '']"/>
  </div>
</template>

<script>
import Foo from "./components/Foo.vue";

export default {
  name: "App",
  components: {
    Foo
  },
  data() {
    return { isRed: false, red: "red", green: "green" };
  }
};
</script>

<style>
.red {
  color: red;
}

.green {
  color: green;
}
</style>

The classes we applied conitionally will still be applied to the roo element of Foo automatically.

We can also do the same with the object syntax as follows:

App.vue:

<template>
  <div id="app">
    <button @click="isRed = !isRed">Toggle</button>
    <Foo :class="classObj"/>
  </div>
</template>

<script>
import Foo from "./components/Foo.vue";

export default {
  name: "App",
  components: {
    Foo
  },
  computed: {
    classObj() {
      return { red: this.isRed, green: !this.isRed };
    }
  },
  data() {
    return { isRed: false, red: "red", green: "green" };
  }
};
</script>

<style>
.red {
  color: red;
}

.green {
  color: green;
}
</style>

They both get the same results.

Conclusion

We can apply a class conditionally with the :class or v-bind:class directive. We can set the value of it as an object or an array.

To make our template cleaner, we can put our class code in a computed property so that it’ll be updated when any piece of component data updates.

A conditional class can be applied to elements and components alike.

We can watch for input value changes with Vue.js with the watch property.

Add a Watcher

To do this, we can add the watch property to our component. We can write the following to check watch for the inputted value of a model and do something to it as follows:

<template>
  <div id="app">
    <input v-model="value">
    <p>{{inputted}}</p>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      value: "",
      inputted: ""
    };
  },
  watch: {
    value(val) {
      this.inputted = `Inputted: ${val}`;
    }
  }
};
</script>

In the code above, we have the watch property that has the value method, which watches the value of the data state.

The v-model directive binds our inputted value to this.value, so this.value will always get the latest inputted value from the input.

The name of the state and the method name in watch have to match. Then we can get the val parameter and then set the this.inputted field as follows:

this.inputted = `Inputted: ${val}`;

Then we’ll see what we entered with Inputted: added before it.

Conclusion

We can add a watcher with the watch property. Then we can use that to update other values as the given value changes.

We can easily watch for store Vuex store changes in a Vue.js app by adding computed properties or using getters.

In this article, we’ll look at how to do watch the Vuex store state with both ways.

Computed Properties

We can use computed properties to watch for the latest value from the store and return it.

For instance, we can write the following code to create a store and then access the value in a component:

main.js:

import Vue from "vue";
import App from "./App.vue";
import Vuex from "vuex";
Vue.use(Vuex);

Vue.config.productionTip = false;

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});

new Vue({
  store,
  render: h => h(App)
}).$mount("#app");

App.vue:

<template>
  <div id="app">
    <button @click="increment">Increment</button>
    <p>{{count}}</p>
  </div>
</template>

<script>
export default {
  name: "App",
  computed: {
    count() {
      return this.$store.state.count;
    }
  },
  methods: {
    increment() {
      this.$store.commit("increment");
    }
  }
};
</script>

In the code above, we have the the store in main.js which holds the count state.

We put the store in our Vue instance. Then in App.vue, we reference the store by using this.$store.

Then we can access the count state we did in the count method in the computed property.

In the end, we see the latest count displayed on the screen as we click the Increment button to call increment, which commits a new value to the store.

Getters

We can create a getter in the store and then use the mapGetters method to add the getter as a computed property in our component. For instance, we an write the following to do that:

main.js:

import Vue from "vue";
import App from "./App.vue";
import Vuex from "vuex";
Vue.use(Vuex);

Vue.config.productionTip = false;

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  getters: {
    count: state => {
      return state.count;
    }
  }
});

new Vue({
  store,
  render: h => h(App)
}).$mount("#app");

App.vue:

<template>
  <div id="app">
    <button @click="increment">Increment</button>
    <p>{{count}}</p>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "App",
  computed: {
    ...mapGetters(["count"])
  },
  methods: {
    increment() {
      this.$store.commit("increment");
    }
  }
};
</script>

In the code above, we added a getter in our store with:

getters: {
  count: state => {
    return state.count;
  }
}

in main.js. Then in the script section of App.vue, we have:

import { mapGetters } from "vuex";
export default {
  name: "App",
  computed: {
    ...mapGetters(["count"])
  },
  methods: {
    increment() {
      this.$store.commit("increment");
    }
  }
};

We imported the mapGetters method from vuex to add the getter directly as a computed property.

In the array we passed into mapGetters we pass in the getter name from the store to access the returned value from the getter.

Therefore, we’ll see the same result as before.

Conclusion

Computed properties are good for getting some simple states. If we need to derive states from a given state, then we should use getters with the mapGetters method to map them to computed properties.

Vue.js is an easy to use web app framework that we can use to develop interactive front end apps.

In this article, we’ll look at how to create and use templates to display data and handle events.

How it Works

Vue templates let us bind data to the DOM.

Vue compiles the template into Virtual DOM render functions. It can figure out the minimal number of components to re-render and minimize DOM manipulation when data changes.

Interpolations

The most basic form of data binding is text interpolation with double curly braces.

For example, we can write:

<p>{{foo}}</p>

To show the value of foo from a Vue instance or component.

The code above will be updated when foo updates.

We can keep it from updating after the first render by using the v-once directive as follows:

<p v-once>{{foo}}</p>

Raw HTML

We can also put raw HTML into an element with the v-html directive.

This lets us add HTML elements and formatting into an element.

For example, if we have the following in src/index.js :

new Vue({  
  el: "#app",  
  data: {  
    rawHtml: "<b>bar</b>"  
  }  
});

and the following in index.html :

<!DOCTYPE html>  
<html>  
  <head>  
    <title>Hello</title>  
    <meta charset="UTF-8" />  
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
  </head> 
  <body>  
    <div id="app">  
      <p v-html="rawHtml"></p>  
    </div>  
    <script src="./src/index.js"></script>  
  </body>  
</html>

Then we get bar bolded displayed since the inner HTML of the p element is <b>bar</b> .

When we’re using this, we have to sanitize the HTML so that it won’t contain any code. This is to prevent cross-site scripting attacks since code will be run if there are any when we pass in a value to the v-html directive.

Attributes

We can set values of HTML element attributes dynamically with v-bind as follows.

In src/index.js , we write:

new Vue({  
  el: "#app",  
  data: {  
    isButtonDisabled: true  
  }  
});

Then when we write the following in index.html :

<!DOCTYPE html>  
<html>  
  <head>  
    <title>Hello</title>  
    <meta charset="UTF-8" />  
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
  </head> 
  <body>  
    <div id="app">  
      <button v-bind:disabled="isButtonDisabled">Button</button>  
    </div>  
    <script src="./src/index.js"></script>  
  </body>  
</html>

Then since we set the isButtonDisabled property to true , the button will be disabled. This also apply to any other truthy value.

On the other hand, if we set it to false , we see that the button is disabled. This also applies to other falsy values like null , undefined , 0 and empty string.

JavaScript Expressions

We can add any other JavaScript expressions between the curly braces.

For example, we can write:

{{ number + 10 }}  
{{ yes ? 'YES' : 'NO' }}  
{{ str.split('').reverse('').join('') }}

Also, we can write expressions as the value of the v-bind directive as follows:

<div v-bind:id="`div-${id}`"></div>

Statements will not run inside the curly braces. For example:

{{ let a = 1 }}

will give us an error. We’ll get the error ‘avoid using JavaScript keyword as the property name: “let”’ in the console.

We also can’t run conditional statements within curly braces:

{{ if (id) { return id } }}

We’ll get the error ‘avoid using JavaScript keyword as the property name: “if”’.

Directives

Directives are special attributes with the v- prefix. We can pass in a single JavaScript expression as the value.

v-for can accept more than one expression separated by ; .

For example, we can conditionally display content with v-if :

<p v-if="show">Hello</p>

If show is truthy, then we’ll see Hello . Otherwise, it won’t be shown.

Arguments

Some directive takes an argument, which is denoted by a colon after the directive name.

For example, we can set the href value of an a element by writing:

<a v-bind:href="'https://medium.com'">Medium </a>

The v-on directive also takes an argument. For example, we can handle the click event of an element by writing:

<a v-on:click="onClick"> Click Me </a>

Then the onClick method in our Vue instance or component will be run when we click on the a element.

Dynamic Arguments

Since Vue.js 2.6.0, we can use a JavaScript expression as an argument for a directive.

For example, we can use it as follows. In src/index.js , we write:

new Vue({  
  el: "#app",  
  data: {  
    click: `${"cl"}${"ick"}`  
  },  
  methods: {  
    onClick() {  
      alert("clicked");  
    }  
  }  
});

Then in index.html , we can use a dynamic argument as follows:

<!DOCTYPE html>  
<html>  
  <head>  
    <title>Hello</title>  
    <meta charset="UTF-8" />  
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
  </head> 
  <body>  
    <div id="app">  
      <a v-on:click="onClick"> Click Me </a>  
    </div>  
    <script src="./src/index.js"></script>  
  </body>  
</html>

This will reference the value of the click property of the data property in our Vue instance, and so we actually have v-on:click .

And therefore, when we click the a tag, we get an alert box with the clicked text displayed.

Dynamic argument expressions must evaluate to a string or null .

Spaces and quotes also aren’t valid inside the brackets.

Conclusion

We can create templates in various ways. The most basic is interpolation with the double curly brace syntax. We can put any JavaScript expression between the braces.

To set the values of attributes dynamically, we can use the v-bind directive. The value can be any JavaScript expression.

Some directives take an argument, which is the part of the directive name after the colon. Again the directive’s value can be any JavaScript expression in this case.

Dynamic arguments can be used since Vue 2.6.0. We can use it by putting an expression in square brackets.