Hey there DEV.to community!

Since I'm usually involved with Vue, I encounter many problems to solve and believe me there is no better feeling than solving a long-time-irritating problem for a developer! xD

So here I'm sharing with you some of those tricks I used to overcome some problems and it might be useful for you as well at some point.

There is a Japanese version of this article available at https://qiita.com/_masa_u/items/6599546a7f3db2e2ffbc Thanks to

Masa UFollow

Software Developer working mainly with Python, Javascript

Enjoy!

Table of content

• Force re-rendering
• Watching nested data
• Custom components with v-model support
• Functional component

Force re-rendering

In some cases, it is necessary to force Vue in order to re-render your component since it won't track some changes.

There are some ways of doing so, such as using the v-if hack, but the correct way is by using forceUpdate method:

  export default {
    methods: {
      forceUpdateMyComponent() {
        this.$forceUpdate()
      },
    },
  }

Keep that in mind that $ is necessary to use this method in your Vue instance.
And you better be notified that this won't update any computed property but only force the view of your component to be re-rendered.

Watching nested data

Sometimes you might need to watch some nested data you can do this using dot notation:

  export default {
    data() {
      return {
        myInfo: {
          firstName: 'Adnan'
        }
      }
    },
    watch: {
      'myInfo.firstName'() {
        console.log('Here');
      }
    }
  }

The code above is when you know which property inside your object to watch!
But what if you want to watch your whole object and also its values?

  export default {
    data() {
      return {
        myFruits: {apple: 'red', banana: 'yellow'},
      }
    },
    methods: {
      changeIt() {
        this.myFruits.apple = 'green'
      },
    },
    watch: {
      myFruits: {
        deep: true,
        handler() {
          console.log('Fruits updated!')
        },
      },
    },
  }

You can define your watch not as a function immediately but as an object, then by using the deep key and the value true watch your object and put what you want to be fired when the data got changed inside a function called handler.

Custom components with v-model support

As you know v-model is used to make a two-way binding with an input element/component and a data property.

If you are making a custom component and want it to support v-model you can emit the input keyword and in order to receive what is passed to your component initially with the v-model you simply need to get a prop called value.

For an easier comprehension check the code below:

<template>
    <div>
        <label>My custom test input: <input :value="inputValue" @input="emitTheData" /></label>
    </div>
</template>

<script>
  export default {
    props: ['value'],
    data() {
      return {
        inputValue: value
      }
    },
    methods: {
      emitTheData() {
        this.$emit('input', this.inputValue)
      }
    }
  }
</script>

This simple component will bind the data passed to it in two directions.

Note: As you can see, I assigned the prop called value to a data called inputValue and used it in my input, you might think that I could pass the prop directly to my input but as Vue suggests it is better not to alter props directly.

Functional component

Imagine having a component with no watch or computed property and no methods! You would only use it to render some other components as one with some props. If it is so then why waste Vue's time when there are no lifecycle methods?

A functional component can be defined as below:

<template functional>
  <div>{{ props.foo }}</div>
</template>

Note: Keep in mind that there is no this context in these components since it is a functional component!

You can check the link below for more information about functional components in Vue:
Vue functional components

Let me know if any other tricks you use in order to make your Vue app faster or your development pace more rapid and I'll add them here.

Check out my free Node.js Essentials E-book here:

NodeJS Essentials | Free E-Book

Adnan Babakan (he/him) ・ Sep 11 '20

#node #javascript #books