Category: JavaScript

Sometimes, we want to use v-model with contenteditable elements in Vue.js.

In this article, we’ll look at how to use v-model with contenteditable elements in Vue.js.

How to use v-model with contenteditable elements in Vue.js?

To use v-model with contenteditable elements in Vue.js, we should replace it with @input and put the content into the element itself.

For instance, we write

<template>
  <p contenteditable @input="onInput">
    {{ content }}
  </p>
</template>

<script>
export default {
  data() {
    return { content: "hello world" };
  },
  methods: {
    onInput(e) {
      console.log(e.target.innerText);
    },
  },
};
</script>

to set @input to onInput to watch for changes in the content of the contenteditable p element.

In onInput, we get the content of the p element with e.target.innerText.

Conclusion

To use v-model with contenteditable elements in Vue.js, we should replace it with @input and put the content into the element itself.

Sometimes, we want to fix the "’import’ and ‘export’ may only appear at the top level" error in Vue.js.

In this article, we’ll look at how to fix the "’import’ and ‘export’ may only appear at the top level" error in Vue.js.

How to fix the "’import’ and ‘export’ may only appear at the top level" error in Vue.js?

To fix the "’import’ and ‘export’ may only appear at the top level" error in Vue.js, we should make sure we aren’t putting import and export in any nested code.

For instance, we write

import Vue from "vue";
import App from "./App.vue";
import VueRouter from "vue-router";

to put all the import statements at the top level and at the top of our JavaScript code.

The same rule applies to export statements.

Conclusion

To fix the "’import’ and ‘export’ may only appear at the top level" error in Vue.js, we should make sure we aren’t putting import and export in any nested code.

Sometimes, we want to set the router-link active style with Vue.js and Vue Router.

In this article, we’ll look at how to set the router-link active style with Vue.js and Vue Router.

How to set the router-link active style with Vue.js and Vue Router?

To set the router-link active style with Vue.js and Vue Router, we can set linkActiveClass and linkExactActiveClass options when we create the VueRouter instance.

For instance, we write

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

const router = new VueRouter({
  routes,
  linkActiveClass: "active", 
  linkExactActiveClass: "active"
})

to set linkActiveClass and linkExactActiveClass to the 'active' class.

The class set for linkExactActiveClass is applied to the links for exact routes.

Then the styles that are set for the active class would be applied to the links that are active.

Conclusion

To set the router-link active style with Vue.js and Vue Router, we can set linkActiveClass and linkExactActiveClass options when we create the VueRouter instance.

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.