Solving Common Vue Problems — Child to Parent Communication, and Computed Properties vs Methods
By: John Au-Yeung
Tags: JavaScript, Web Development, Software Development, Technology, Programming

Solving Common Vue Problems — Child to Parent Communication, and Computed Properties vs Methods John Au-Yeung Follow Jun 26 · 4 min read

Photo by Tara Raye on Unsplash

Vue.js makes developing front end apps easy. However, there are still chances that we’ll run into problems.

In this article, we’ll look at some common issues and see how to solve them.

Force Vue to Reload

We can use the this.$forceUpdate(); to force reload a Vue component.

However, this isn’t a good solution to solve most problems.

The data on our component should be updated with other methods.

Method vs Computed Properties

Methods are computed properties are different, even though they’re both functions.

Computed properties are functions that return a value that is derived from other values.

For example, if we have a message state that is a string, we can return the revered version in a computed property:

computed: {

reversedMessage() {

return this.message.split('').reverse().join('')

}

}

Then it can be accessed in the component as this.reveresedMessage .

And in the template, we can write:

{{ reversedMessage }}

to access it.

It’s a getter only function and so we can’t set a new value to it directly.

A method is a function that can be called in other parts of a component or access method in the template.

For instance, we can write a method by writing:

methods:{

search(keyword){

return this.names.filter(n => n.includes(keyword))

}

}

Then we can call that in a component by writing:

this.search('foo');

or we can call it in the template by writing:

search('foo')

Call a Function in a Child Component on Parent Events

We can call a function on a child component by assigning a ref on a child component and then calling a function in it.

For instance, if our child component is the following:

const ChildComponent = {

template: '<div>{{value}}</div>',

data: function () {

return {

value: 0

};

},

methods: {

setValue(value) {

this.value = value;

}

}

}

Then we can call it from the parent by writing:

new Vue({

el: '#app',

components: {

'child-component': ChildComponent

},

methods: {

click() {

this.$refs.childComponent.setValue(5);

}

}

})

given that we have:

<div id="app">

<child-component ref="childComponent"></child-component>

<button @click="click">Click</button>

</div>

We assigned the childComponent ref to the child-component .

Then can access the child’s methods via the ref as we did in setValue .

Deploy a Vue App

We can deploy a Vue app with the npm run build command.

This will build the app.

‘[Vue warn]: Property or method is not defined on the instance but referenced during render’ Error

This error occurs because the state or method isn’t present in the component code, but it’s defined in the template.

If we reference a method in the template, then we have to have it in the methods section.

For instance, if we have:

const app = new Vue({

el: "#settings",

data,

methods: {

setValue(index) {

//...

}

}

});

Then we can reference it in the template:

<button @click=' setValue (index)'> set value </button>

If we access a state, then we have to include it in the object we return in the data method.

For instance, if we have:

const app = new Vue({

el: "#settings",

data(){

return {

prop: 'foo'

}

}

});

Then we can access it in the template by writing:

{{ prop }}

Otherwise, we’ll get an error.

Display Unescaped HTML in Vue.js

We can display unescaped HTML in Vue.js with the v-html directive.

For example, we can write:

<div v-html="htmlContent"> </div>

Then assuming that htmlContent is a string with HTML code in it, it’ll be displayed directly.

Access Child Data from Parent

We can emit an event with the data to send from the child to the parent.

For example, in the child, we can write:

this.$emit('event', 'foo');

'foo' is the data to emit, and 'event' is the event name.

Then in the parent, we can listen to it by writing:

<chilld-component @event='doSomething($event)'></child-component>

Assuming the child component is called child-component , we can listen to the event event emitted by it.

We can then get the data by using the $event object which has the data.

In this case, $event is 'foo' .

We can then do something with it like passing it into the doSomething method as we did above.

Photo by Jordan Rowland on Unsplash

Conclusion

We can force reload on our page by using the this.$forceUpdate() method.

To display HTML as-is, we can use the v-html directive.