Category: Vue

Sometimes, we want to pass props as initial data in Vue.js 2.

In this article, we’ll look at how to pass props as initial data in Vue.js 2.

How to pass props as initial data in Vue.js 2?

To pass props as initial data in Vue.js 2, we can return the value of the prop in the data method.

For instance, we write

<script>
export default {
  //...
  props: ["initialCounter"],
  data() {
    return {
      counter: this.initialCounter,
    };
  },
};
</script>

to set the initial value of the counter reactive property to the initial value of the this.initialCounter prop.

We register the prop with

props: ["initialCounter"]

Conclusion

To pass props as initial data in Vue.js 2, we can return the value of the prop in the data method.

Sometimes, we want to add Google Maps in Vue.js.

In this article, we’ll look at how to add Google Maps in Vue.js.

How to add Google Maps in Vue.js?

To add Google Maps in Vue.js, we can use the google-maps package.

To install it, we run

npm i google-maps

Then we use it by writing

<template>
  <section>
    <div ref="map"></div>
  </section>
</template>

<script>
import GoogleMapsLoader from "google-maps";

export default {
  //...
  mounted() {
    GoogleMapsLoader.load((google) => {
      const map = new google.maps.Map(this.$refs.map, {
        zoom: 15,
        center: position,
      });
    });
  },
};
</script>

to assign a ref to the div.

And then we call GoogleMapsLoader.load with a callback which populates the div with the Google Map content with the google.maps.Map constructor called with the map ref and an object with some map options.

Conclusion

To add Google Maps in Vue.js, we can use the google-maps package.

Sometimes, we want to get an element’s height with Vue.js.

In this article, we’ll look at how to get an element’s height with Vue.js.

How to get an element’s height with Vue.js?

To get an element’s height with Vue.js, we can assign a ref to the element we want to get the height for and then use its clientHeight property.

For instance, we write

<template>
  <section>
    <div ref="infoBox">
      <img />
      <ul>
        some list
      </ul>
    </div>
  </section>
</template>

<script>
export default {
  //...
  mounted() {
    this.matchHeight();
  },
  matchHeight() {
    const height = this.$refs.infoBox.clientHeight;
  },
};
</script>

to assign the infoBox ref to the div with the ref prop.

Then we get the div’s height with

this.$refs.infoBox.clientHeight;

Conclusion

To get an element’s height with Vue.js, we can assign a ref to the element we want to get the height for and then use its clientHeight property.

Sometimes, we want to call a method in a child component with Vue.js.

In this article, we’ll look at how to call a method in a child component with Vue.js.

How to call a method in a child component with Vue.js?

To call a method in a child component with Vue.js, we can pass in a prop from the parent component to its child.

Then in the child component, we watch the prop’s value and run the method we want.

For instance, we write

<script>
export default {
  //...
  props: ["testProp"],
  methods: {
    sayHello() {
      alert("hello");
    },
  },
  watch: {
    testProp(newVal, oldVal) {
      this.sayHello();
    },
  },
};
</script>

in the child component to register the testProp prop and add the sayHello method.

We also add a watcher for testProp in watch which calls sayHello when testProp changes value.

Then in the parent component, we write

<template>
  <div>
    <ChildComponent :testProp="trigger" />
  </div>
</template>

<script>
export default {
  //...
  data() {
    return {
      trigger: 0,
    };
  },
};
</script>

to add the ChildComponent and set the testProp prop to trigger.

And we change the trigger value to run sayHello.

Conclusion

To call a method in a child component with Vue.js, we can pass in a prop from the parent component to its child.

Then in the child component, we watch the prop’s value and run the method we want.

Sometimes, we want to fix the ‘component lists rendered with v-for should have explicit keys’ warning with Vue.js.

In this article, we’ll look at how to fix the ‘component lists rendered with v-for should have explicit keys’ warning with Vue.js.

How to fix the ‘component lists rendered with v-for should have explicit keys’ warning with Vue.js?

To fix the ‘component lists rendered with v-for should have explicit keys’ warning with Vue.js, we should set the key prop of each item in the list to a unique value.

For instance, we write

<template>
  <div>
    <todo-item
      v-for="todoItem of todos"
      :data="todoItem"
      :key="todoItem.id"
    ></todo-item>
  </div>
</template>

to set the key prop to the todoItem.id value where todoItem.id is the unique ID for each item in the todos array.

Conclusion

To fix the ‘component lists rendered with v-for should have explicit keys’ warning with Vue.js, we should set the key prop of each item in the list to a unique value.