Reactivity

1. How to cast the String of an input field to a Number?

We’ll start simple. The following will save you some time casting a String to a Number:

<template>

<input v-model.number="age" type="number">

</template>

<script>

export default {

data() {

return {

age: 0

}

}

};

</script>

TIP: You can also use v-model.trim to trim the whitespace of the input.

2. Why is my Array not reactive when updating an index?

You might get the idea that your array data is not updating when setting data to an index directly. Vue doesn’t detect directly setting a value to the index of an Array. The following does NOT update your bindings:

this.artists[5] = 'Totally Enormous Extinct Dinosaurs';

You can use Array.splice to solve this problem:

this.artists.splice(5, 1, 'Totally Enormous Extinct Dinosaurs');

3. How to watch a specific property on an Object?

One of the great things of Vue is of course its reactivity. When you change a property on the data object, it will magically update its bindings. You probably know that Vue allows you to watch a property on the data Object like so:

data() {

return {

track: 'Household goods'

}

},

watch: {

track(newValue, oldValue) {

// do something with newValue or oldValue

}

}

However you might be interested in watching a specific property within an Object. You can do this by specifying a method name with the key path as String within the watch Object:

data() {

return {

house: {

livingroom: {

lights: 4

}

}

}

},

watch: {

'house.livingroom.lights' : function(newVal, oldVal) {

// triggered when lights is changed

}

}

4. How to watch an Object for ANY property change?

It could also be that you want to know when any property is changed within an Object. This is somewhat more elaborate as you have to specify an Object with a method and set the ‘deep’ property to true. This will trigger the handler when any nested property is changed within the object that is being watched:

watch: {

house: {

handler(newVal, oldVal) {

// triggered when anything is changed within the Object

},

deep: true

}

}

Vuex

When your application scales up a bit and using an Event bus does not cut it anymore, you might want to invest some time in studying Vuex. Vuex manages the state of your application. Although it might seem daunting and somewhat cumbersome at first, it is actually not that bad and using it properly will make your application more structured and thus less cluttered.

5. How to dispatch an action on another namespaced module in Vuex?

Sometimes you want to call an action from one namespaced module within another namespaced module:

dispatch('namespace/action', {

data: 'your payload',

}, { root: true });

Notice the options Object with root set to true after the payload.

6. How to pass data to a getter method within a module in Vuex?

Getters allow you to request data from your Vuex store. Sometimes you need some specific data from the store without changing state. There is a clever way to use a getter method to do this, which was mentioned in this GitHub issue.

getters: {

getMessageById: state => id =>

state.messages.find(message => message.id === id),

},

The ES6 syntax might be short, but it’s not always clear if you are not familiar with it. So here’s the less fancy ES5 syntax to make it somewhat more verbose:

getters: {

getMessageById: function(state) {

return function(id) {

return state.messages.find(function(message) {

return message.id === id;

});

}

}

}

In JavaScript functions are first class citizens. This makes it possible to pass them around. This also means that a function can return another function, which is the case here. When you call getMessageById , the state parameter is dependency injected by Vuex. This will allow you to access… well.. your state. You can return a function from this function, which will allow you to pass one (or more) arguments from your component.

You can call the getter as follows from your component: