Author: John Au-Yeung

Sometimes, we want to mount the child components only after data has been loaded with Vue.js.

In this article, we’ll look at how to mount the child components only after data has been loaded with Vue.js.

How to mount the child components only after data has been loaded with Vue.js?

To mount the child components only after data has been loaded with Vue.js, we can use the v-if directive to check if the data is loaded before rendering the child component.

For instance, we write:

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<div id='app'>

</div>

to add the Vue script and app container.

Then we write:

const Foo = {
  template: `<p>{{index}}</p>`,
  props: ['index']
}

const v = new Vue({
  el: '#app',
  template: `
    <div v-if='arr'>
    	<foo :key='i' :index='i' v-for='i of arr' />
    </div>
  `,
  data: {
    arr: undefined
  },
  components: {
    Foo
  },
  mounted() {
    setTimeout(() => {
      this.arr = [1, 2, 3, 4, 5]
    }, 1000)
  }
})

to add v-if to the div to see if arr is defined before we use v-for to render the array entries.

In the mounted hook, we assign this.arr to an array in the setTimeout callback, so there’s a delay until arr is assigned to the array.

Therefore, we should see a delay before Foo is rendered.

Conclusion

To mount the child components only after data has been loaded with Vue.js, we can use the v-if directive to check if the data is loaded before rendering the child component.

Sometimes, we want to detect if JavaScript object is a FormData instance.

In this article, we’ll look at how to detect if JavaScript object is a FormData instance.

How to detect if JavaScript object is a FormData instance?

To detect if JavaScript object is a FormData instance, we can use the instanceof operator.

For instance, we write:

const formData = new FormData()
console.log(formData instanceof FormData)

to create a new FormData instance and assign it to formData.

Next, we check if formData is an instance of FormData with the instanceof operator.

The console log should log true since formData is a FormData instance.

Conclusion

To detect if JavaScript object is a FormData instance, we can use the instanceof operator.

Sometimes, we want to create a canvas 2d context without displaying the canvas with JavaScript.

In this article, we’ll look at how to create a canvas 2d context without displaying the canvas with JavaScript.

How to create a canvas 2d context without displaying the canvas with JavaScript?

To create a canvas 2d context without displaying the canvas with JavaScript, we can use the document.createElement method.

For instance, we write:

const canvas = document.createElement('canvas');
canvas.width = 200;
canvas.height = 100;

const ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(20, 10, 80, 50);

const imgUrl = canvas.toDataURL();
const img = document.createElement('img');
img.src = imgUrl

document.body.appendChild(img)

to create the canvas with createElement.

Then we get the context with getContext.

Next, we set the fill style and add a rectangle with fillStyle and fillRect.

Then we convert the canvas to an image URL string with toDataURL.

Finally, we create an img element with createElement, set the src attribute to imgUrl and append the img element as a child of the body element with document.body.appendChild.

Now we should see a red rectangle displayed,

Conclusion

To create a canvas 2d context without displaying the canvas with JavaScript, we can use the document.createElement method.

Sometimes, we want to search an array of arrays with JavaScript.

In this article, we’ll look at how to search an array of arrays with JavaScript.

How to search an array of arrays with JavaScript?

To search an array of arrays with JavaScript, we can convert the nested arrays to a JSON string and them compare them.

For instance, we write:

const arr = [
  [2, 6, 89, 45],
  [3, 566, 23, 79],
  [434, 677, 9, 23]
];

const arrToFind = [3, 566, 23, 79]
const result = arr
  .map(JSON.stringify)
  .findIndex(a => {
    return a === JSON.stringify(arrToFind)
  })
console.log(result)

to find arrToFind in arr.

To do this, we call arr.map with JSON.stringify to convert each nested array to JSON strings.

Then we call findIndex with a callback that checks if a is the same as the stringified version of arrToFind.

Therefore, we see that result is 1 from the log.

Conclusion

To search an array of arrays with JavaScript, we can convert the nested arrays to a JSON string and them compare them.

Sometimes, we want to change color of specific words in text area with JavaScript.

In this article, we’ll look at how to change color of specific words in text area with JavaScript.

How to change color of specific words in text area with JavaScript?

To change color of specific words in text area with JavaScript, we can use a contenteditable div as the text area.

Then we can replace the matched substrings to the HTML code we want and assign it to the innerHTML property of the contentedtable div.

For instance, we write:

<div contenteditable="true" style='height: 200px'></div>

to add a contenteditable div.

Then we write:

const div = document.querySelector('div')
div.onblur = (e) => {
  e.target.innerHTML = e.target.innerHTML.replace(/select/g, (match) => {
    return `<span style='color: orange'>${match}</span>`
  })
}

to select the div with querySelector.

Then we set the div.onblur method to a function that calls e.target.innerHTML.replace to select all the substrings with the word 'select'.

Then we pass in a callback that does the replacement on all of them by replacing them with a span that sets their color to orange.

Now when we focus away from the div, we should see the color of ‘select’ change to orange.

Conclusion

To change color of specific words in text area with JavaScript, we can use a contenteditable div as the text area.

Then we can replace the matched substrings to the HTML code we want and assign it to the innerHTML property of the contentedtable div.