[Vuejs]-Unexpected asynchronous action in "" computed property vue/no-async-in-computed-properties Vue3

by

1👍

Try to run that call inside the created hook :

import axios from 'axios';
export default {
  name: "RegisterView",
  data() {
    return {
      user: {
        username: "",
        password: "",
        email: "",
        phoneNumber: "",
        role: "",
      },
      role : []
    };
  },
   created(){
     this.getRole():
  },
  methods: {
    getRole(){
       axios.get('http://localhost:8080/api/role/get').then(res=>{
        this.role = res.data;
      }).catch(err=>{
          this.role = []
      })
    
    },
    register() {
      axios.post("http://localhost:8080/api/user/register", this.user).then((res) => {
        console.log(res.data);
      });
    },
  },
};

0👍

GetRole uses promises, meaning it doesn’t have immediate value but has side-effects, which is considered to be dirty code by the linter (code quality checker)

If you need async computed, use asyncComputed instead, which has immediate value and gets updated of promise resolution automatically
https://github.com/foxbenjaminfox/vue-async-computed for Options API, @vueuse/core for Composition API

Leave a comment