Category: Vue Answers

Sometimes, we want to prevent on click on parent when clicking button inside div with Vue.js.

In this article, we’ll look at how to prevent on click on parent when clicking button inside div with Vue.js.

How to prevent on click on parent when clicking button inside div with Vue.js?

To prevent on click on parent when clicking button inside div with Vue.js, we can add the stop modifier to stop event propagation.

For instance, we write

<template>
  <div>
    <p @click.stop="onClick">hello world</p>
  </div>
</template>

to add @click.stop and set it to onClick.

With the stop modifier, onClick only runs when the p element is clicked.

Conclusion

To prevent on click on parent when clicking button inside div with Vue.js, we can add the stop modifier to stop event propagation.

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.