There is the solution I used, which is based on Linus Borg answer and works fine with vue.js 2.0. Vue.directive(‘click-outside’, { bind: function (el, binding, vnode) { el.clickOutsideEvent = function (event) { // here I check that click was outside the el and his children if (!(el == event.target || el.contains(event.target))) { // and if … Read more
This is done with Webpack resolve.alias configuration option and isn’t specific to Vue. In Vue Webpack template, Webpack is configured to replace @/ with src path: const path = require(‘path’); … resolve: { extensions: [‘.js’, ‘.vue’, ‘.json’], alias: { … ‘@’: path.resolve(‘src’), } }, … The alias is used as: import ‘@/<path inside src folder>’;
Both of those examples use an arrow function () => { }, which binds this to a context different from the Vue instance. As per the documentation: Don’t use arrow functions on an instance property or callback (e.g. vm.$watch(‘a’, newVal => this.myMethod())). As arrow functions are bound to the parent context, this will not be … Read more
Vue 2 The following also works in Vue 3 but is deprecated. Sass: Use ::v-deep ::v-deep .child-class { background-color: #000; } Not using Sass: Use >>> >>> .child-class { background-color: #000; } With either syntax, the <style> tag for this component must be scoped: <style scoped> Vue 3 (Updated 1/19/2022) In Vue 3, the ::v- … Read more
You can even make it shorter and use the root Vue instance as the global Event Hub: Component 1: this.$root.$emit(‘eventing’, data); Component 2: mounted() { this.$root.$on(‘eventing’, data => { console.log(data); }); }
Partial answer: with Chrome DevTools, you can localize the issue and see exactly what element caused the issue. Do the following (I did that with Nuxt 5.6.0 and Chrome 64.0.3282.186) Show DevTools in Chrome (F12) Load the page that causes “the client-side rendered virtual DOM tree…” warning. Scroll to the warning in DevTools console. Click … Read more
Access-Control-Allow-Origin is a response header the server the request goes to must send. And all other Access-Control-Allow-* headers are response headers for servers to send. If you don’t control the server your request is sent to, and the problem with the response is just the lack of the Access-Control-Allow-Origin header or other Access-Control-Allow-* headers you … Read more
This has to do with the fact that mutating a prop locally is considered an anti-pattern in Vue 2 What you should do now, in case you want to mutate a prop locally, is to declare a field in your data that uses the props value as its initial value and then mutate the copy: … Read more
If your Nuxt version is 2.13 or above, you don’t need to use @nuxtjs/dotenv or anything alike because it is already backed into the framework. To use some variables, you need to have an .env file at the root of your project. This one should be ignored by git. You can then input some keys … Read more
Use JavaScript code inside v-bind (or shortcut “:”): :href=”‘#purchase-‘ + item.id” and :id=”‘purchase-‘ + item.id” Or if using ES6 or later: :id=”`purchase-${item.id}`”