Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Uncaught (in promise) ReferenceError: foto is not defined

No curso de VUE parte 2, na parte de formulários, quanto tento gravar uma nova foto a mensagem é apresentada no console:

Uncaught (in promise) ReferenceError: foto is not defined

Dei console.log em foto antes the chamar o this.$http.post() e a foto existe, foi instanciada.

Foto
    descricao: "ddd"
    titulo: "dd"
    url: "dd"
    __ob__: Observer {value: Foto, dep: Dep, vmCount: 0}
    get descricao: ƒ reactiveGetter()
    set descricao: ƒ reactiveSetter(newVal)
    get titulo: ƒ reactiveGetter()
    set titulo: ƒ reactiveSetter(newVal)
    get url: ƒ reactiveGetter()
    set url: ƒ reactiveSetter(newVal)__proto__: Object

Cadastro.vue?9367:54 Uncaught (in promise) ReferenceError: foto is not defined at VueComponent.eval (Cadastro.vue?9367:52)
3 respostas

Fala aí Leandro, tudo bem? Consegue postar o código completo do componente? Ficaria mais fácil tentar lhe ajudar.

Fico no aguardo.

A gravação é realizada mas a mensagem de erro é lançada.

Cadastro.vue?9367:52 Uncaught (in promise) ReferenceError: foto is not defined
    at VueComponent.eval (Cadastro.vue?9367:52)
(anonymous)    @    Cadastro.vue?9367:52
Promise.then (async)        
p.then    @    vue-resource.common.js?929a:237
gravar    @    Cadastro.vue?9367:52
submit    @    Cadastro.vue?8d96:16
invoker    @    vue.esm.js?efeb:2141
fn._withTask.fn._withTask    @    vue.esm.js?efeb:1926

Código completo.

<template>
  <div>
    <h1 class="centralizado">Cadastro</h1>
    <h2 class="centralizado"></h2>

    <form @submit.prevent="gravar()">
      <div class="controle">
        <label for="titulo">TÍTULO</label>
        <input v-model.lazy="foto.titulo" id="titulo" autocomplete="off">
      </div>

      <div class="controle">
        <label for="url">URL</label>
        <input v-model.lazy="foto.url" id="url" autocomplete="off">
        <imagem-responsiva v-show="foto.url" :url="foto.url" :titulo="foto.titulo"/>
      </div>

      <div class="controle">
        <label for="descricao">DESCRIÇÃO</label>
        <textarea v-model.lazy="foto.descricao" id="descricao" autocomplete="off"></textarea>
      </div>

      <div class="centralizado">
        <meu-botao rotulo="GRAVAR" tipo="submit" :confirmacao="false" estilo="padrao"/>
        <router-link to="/">
          <meu-botao rotulo="VOLTAR" tipo="button" :confirmacao="false" estilo="padrao"/>
        </router-link>
      </div>
    </form>
  </div>
</template>

<script>
import ImagemResponsiva from "../shared/imagem-responsiva/ImagemResponsiva.vue";
import Botao from "../shared/botao/Botao.vue";
import Foto from "../../domain/Foto.js";

export default {
  components: {
    "imagem-responsiva": ImagemResponsiva,
    "meu-botao": Botao
  },
  data() {
    return {
      foto: new Foto()
    };
  },
  methods: {
    gravar() {
      this.$http
        .post("v1/fotos", this.foto)
        .then(() => (this.foto = new foto()), err => console.log(err));
    }
  }
};
</script>
<style scoped>
</style>
solução!

Fala aí Leandro, tudo bem? Acredito que o problema está no new foto(), você está tentando instanciar uma classe com as letras em minúsculo.

Mude para F que deve dar certo:

.then(() => (this.foto = new Foto()), err => console.log(err));

Espero ter ajudado.