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

$http is not defined

Pessoal, meu código está exatamente igual ao do instrutor, mas estou recebendo o seguinte erro:

TypeError: "this.$http is undefined"

    created App.vue:19 invokeWithErrorHandling18VueJS

<anonymous> main.js:6 <anonymous> build.js:942 __webpack_require__ build.js:679 fn build.js:89 <anonymous> build.js:790 __webpack_require__ build.js:679 <anonymous> build.js:725 <anonymous> build.js:1 

Codigo do APP.vue:

<template>
  <div id="app">
    <h1>{{ titulo }}</h1>
    <li v-for="foto of fotos">
      <img :src="foto.url" :alt="foto.titulo">
    </li>
  </div>
</template>

<script>
  export default{
    data(){
      return {
        titulo: "Alura Pic",
        fotos: []
      }
    },
    created(){
      let promise = this.$http.get('http://localhost:3000/v1/fotos');

      promise.then(function (res){
        console.log(res);
      });
    }
  }
</script>

<style>

</style>

Código do main.js:

import Vue from 'vue'
import App from './App.vue'

import VueResource from 'vue-resource' // modulo para requisições ajax

new Vue({
  el: '#app', //recebe o seletor que será substituído pela app
  render: h => h(App) //componente a ser renderizado
})

Vue.use(VueResource) //registra o módulo importado

Já tentei reinstalar o vue-resource, mas o erro continua.

3 respostas
solução!

Fala aí André, tudo bem? Acho que o problema está na ordem que você está adicionando o VueResource para o Vue.

Faz o .use antes do render:

import Vue from 'vue'
import App from './App.vue'

import VueResource from 'vue-resource' // modulo para requisições ajax

Vue.use(VueResource) //registra o módulo importado

new Vue({
  el: '#app', //recebe o seletor que será substituído pela app
  render: h => h(App) //componente a ser renderizado
})

Espero ter ajudado.

Era isso mesmo! Obrigado

Magina, sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.