Today I was plagued with an annoying bug! I was banging my head for a while!

Let’s get into it! For example purposes, I will show you a snippet of how my code looked like:

export default Vue.extend({
name: 'justaname',
data() {
return {
currentSlide: 0 as number
};
},
computed: {
internalOpen: {
get(): boolean {
return this.value;
},
set(val) {
(this as any).$emit('input', false);
},
},
},
});

This resulted in the following error:

Typescript: Property ‘currentSlide’ does not exist on type ‘Vue’

When I added a type on my setter val the error was no longer present!

set(val: boolean) {
(this as any).$emit('input', false);
},

Basically if your setter is missing a type you’ll get this strange error.

Hopefully this helps some people out there! 😄

Did you know that the following code will work:

The IQueryable<Entity> will attempt to load the entire query result into memory when enumerated.

I prefer to use the ToList()method to actually hit the database. In my opinion it’s a lot clearer than the example above.

Resolving query with .ToList

Make sure to read the following documentation about EF Core if you’re interested in performance!

Enjoy!

The reason that you can’t execute the following code

watch: {     
a: (val, oldVal) => {
this.executeMyMethod()
}
}

is because arrow functions bind to the parent context, so ‘this’ will not be the vue context as you expect, this.executeMyMethod will be undefined.

This is how your code should look like:

watch: {     
a: function(val, oldVal){
this.executeMyMethod()
}
}

Enjoy!

If you’re using Ionic Framework, Ionicons is packaged by default, so no installation is necessary.

So how do we get them working in a vue 3 project?

Start by importing your ion icon:

import {heart} from 'ionicons/icons';

If you’re using the composition API, return the icon in your setup:

setup() {    return {        heart    }
}

Last step is adding the icon in your html:

<ion-icon :icon="heart"></ion-icon>

More general information can be found on: https://ionicons.com/usage

Hopefully this saves you some time!

Whenever you navigate to a route that nginx can’t resolve you’ll see a 404 not found. To allow angular to handle the routing simply add the location section, so it redirects back to our index.html

server {
listen 80;
server_name example.org;
root /var/www/example.org/;
location / {
try_files $uri $uri/ /index.html;
}

}

Reload your nginx config:

nginx -s reload

That’s all, Enjoy!

How to configure Angular route to redirect to a default route if the user goes to a non existent route?

I’m working with Angular 11, following steps:

  1. Go into your app-routing.module.ts
  2. In your routes Array add a new object:
{path: '**', redirectTo: '', pathMatch: 'full'}

Mine looks like this:

const routes: Routes = [{path: '', component: HomeComponent, pathMatch: 'full'}, {path: '**', redirectTo: '', pathMatch: 'full'}];

That’s all, save and try to visit a URL that does not exist, you should be redirected.

Cheers!

Sami C.

Freelance Software Engineer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store