1
resposta

Expected to return a value in "estiloDoBotao" computed property vue/return-in-computed-property

Não consegui usar o código da aula, no computed, quando salvo ele deixa de compilar e apresenta falha para compilar:

Failed to compile.

./src/components/shared/botao/Botao.vue Module Error (from ./node_modules/eslint-loader/index.js):

C:\Cursos Alura\Frontend\Vue parte1\alurapic\src\components\shared\botao\Botao.vue 26:20 error Expected to return a value in "estiloDoBotao" computed property vue/return-in-computed-property

✖ 1 problem (1 error, 0 warnings)

No lugar de :

computed: {
      estiloDoBotao(){
          if(this.estilo === 'padrao' || !this.estilo) return "botao botao-padrao";
          if(this.estilo === 'perigo') return "botao botao-perigo";
      }
}

Precisei usar um código mais verboso:

 computed: {
       estiloDoBotao: function () {
        let estiloBotao
        if (this.estilo == 'padrao' || !this.estilo) {
          estiloBotao = "botao botao-padrao"
        }  else if (this.estilo == 'perigo') {
           estiloBotao = "botao botao-perigo"
        }
         return estiloBotao; 
     }
  }

Não consegui entender o motivo que na minha máquina o código da aula, que é mais simples, não funcionou.

1 resposta

Jorbson,

Tudo bem contigo. Eu carreguei teu código na minha aplicação e não obtive esta mensagem de erro. Consegui inclusive aplicar tanto o estilo 'padrao' como 'perigo'.

Uma única observação, no teu primeiro código, você esta usando comparação estrita ( === ), e na segunda parte comparação comum ou abstrata (==).

Mas isto também não causou erro, visto que this.estilo e 'padrao' são avaliados como string, mesmo tipo.

Apenas como referência para ver se te ajuda a encontrar o erro, estou colando como ficou o template do componente:

<button class="botao" :class="estiloDoBotao" :type="tipo" @click="disparaAcao()">{{rotulo}}</button>

Esperto ter ajudado de alguma forma. Bons estudos.