Category: Javascript

Vue js call method of component from main.js

hadesunseenn1 Comment

Goal here is to show the LOGIN modal when the API returns status 401

For complete discussion check this link

Question

We have added a component in main.js

var vm = new Vue({
    el: '#app',
    router,
    store
});

Vue.component('login-modal', 
  () => import('./components/LoginModal')
)

In main.js using axios.interceptors.response.use() to check the status of all ajax requests. Works fine but now need to call the function of LoginModal which will open the modal in case status of API is 401

axios.interceptors.response.use(
  res => res,
  err => {
    if (err.response.status == 401) {
      router.push('/login')
      //call to component method instead instead of **router.push('/login')**
    }
  }
);

In vue templates we use references like this

this.$refs.loginModal.open()

but don’t know how we can call component function from main.js

Answer: The solution is to emit the event from main.js then listen it in the component

In main.js 

axios.interceptors.response.use(
  res => res,
  err => {
    if (err.response.status == 401) {
      vm.$emit('openLogin');
    }
  }
);

and in the component

mounted() {
  this.$root.$on('openLogin', () => {
    this.$refs.loginModal.open()
  })
}

For complete discussion check this link

javascript check function performance

hadesunseennLeave a comment

use javascript performance object 

const fish = ['dory', 'bruce', 'marlin', 'nemo'];
const nemo = ['nemo'];
const everyone = ['dory', 'bruce', 'marlin', 'nemo', 'gill', 'bloat', 'nigel', 'squirt', 'darla', 'hank'];
const large = new Array(10000).fill('nemo');

function findNemo2(fish) {
  let t0 = performance.now();
  for (let i = 0; i < fish.length; i++) {
    if (fish[i] === 'nemo') {
      console.log('Found NEMO!');
    }
  }
  let t1 = performance.now();
  console.log("Call to find Nemo took " + (t1 - t0) + " milliseconds.");
}

findNemo2(large)

Vue js component data is not being updated, values gets udpated in vux store though

hadesunseennLeave a comment

Vue js components are reactive but sometimes if we change store data the value in the component does not get updated. We need to tell vue js to re-render the component. It won’t re-render until we change some value for the component prop. So best way is to change the value for :key prop.

 

If you want to read in detail, please check this article. All credit goes to Michael Thiessen for this awesome logic.

Ubuntu vue cli Error: EACCES: permission denied, access ‘/usr/local/lib’

hadesunseennLeave a comment

while installing the @vue/cli got this error 

Error: EACCES: permission denied, access '/usr/local/lib'

This error is occurring because the user does not have enough permissions to write to this directory. Run this command to fix the permissions

 sudo chown -R $USER /usr/local/lib

this will fix the error. Now run this again 

npm install -g @vue/cli

now you may see another error

Error: EACCES: permission denied, symlink '../lib/node_modules/@vue/cli/bin/vue.js' -> '/usr/local/bin/vue'

this error is occurring because the user does not have permissions for bin directory. Let’s change its permission

sudo chown -R $USER /usr/local/bin

Now run command again 

npm install -g @vue/cli

hopefully this time you will see success message.

check the version of installed vue with this command

vue --version

Vue js, Vee validate, Vuetify Url (link) validation

hadesunseennLeave a comment

like me if you were not able to find a rule for URL in vee validate documentation then you can simply create custom rule for it.

extend('url', {
  validate(value) {
    var pattern = new RegExp('^(https?:\\/\\/)?' + // protocol
      '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
      '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
      '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
      '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
      '(\\#[-a-z\\d_]*)?$', 'i'); // fragment locator
    return pattern.test(value);
  },
  message: 'Please enter a valid link.'
});

and you can use this rule 



<ValidationProvider v-slot="{ errors }" name="Tiktok" rules="url">


<v-text-field v-model="youtube" :error-messages="errors" label="Youtube"></v-text-field>


</ValidationProvider>