seo Question posted in
Some basic information to get you started with this can be found here.

VUE JS 2 + WEBPACK Cannot read property 'get' of undefined VUE RESOURCE – SEO

I feel lost.

I’ve used vue-cli for my project.
I’ve vuerouter installed.
Everything is ok.
I want to use view resource in a vue component but i can’t find why it don’t works.

This is my main.js (i’m using webpack)

import Vue from 'vue'
import VueRouter from 'vue-router'
var VueResource = require('vue-resource')

Vue.use(VueRouter)
Vue.use(VueResource)

const router = new VueRouter({
  routes: [{
    path: '/',
    component: require('./components/index.vue')
  },
  {
    path: '/products/stock',
    component: require('./components/stock.vue')
  },
  {
    path: '/products/seo',
    component: require('./components/seo.vue')
  },
  {
    path: '/settings',
    component: require('./components/settings.vue')
  }
  ]
})

new Vue({
  el: '#app',
  router,
  data: {
    message: 'Hello Vue!'
  },
  mounted: () => {
    console.log("APP MOUNTED")
  },
  render: h => h(require('./App.vue'))
})

when i go to /#/product/seo
there is the code: 

<template>
  <div id="app">
    Seo tabs du fastmanager {{ message }}
    <input type="text" name="" v-model="message">
  </div>
</template>

<script>

export default {
  data: () => {
    return {
      message: "Hello buddy"
    }
  },
  mounted: () => {
    console.log("SEO MOUNTED")
    this.$http.get('/').then((response) => {
    // success callback
  }, (response) => {
    // error callback
  });

  }
}
</script>

<style lang="css">
</style>

i’ve have this error in JS console.

seo.vue?468d:18Uncaught TypeError: Cannot read property ‘get’ of undefined(…)

Vue resource is working well in main.js.

So, i think it’s because the view is loaded before the app. I don’t know how to do.
Sorry for ma bad english.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Ok i've found IT.

    in my seo.vue i put this:

    <template>
  <div id="app">
    Seo tabs du fastmanager
    <textarea type="text" name="" cols="40" rows="10" v-model="message"></textarea>
    <button type="button" v-on:click="test" name="button">Test</button>
  </div>
</template>

<script>
var Vue = require('vue')
export default {
  data: () => {
    return {
      message: "Coucou"
    }
  },
  mounted: function()
  {
    console.log(this)

  },
  methods: {
    test: function(){
      Vue.http.get('https://jsonplaceholder.typicode.com/posts/1').then((response) => {
        console.log("SUCCESS",response);
        this.message = response
      }, (response) => {
        console.log("ERROR",response);
        // error callback
      });
    }
  }
}
</script>

<style lang="css">
</style>

    An dit work fine.


  2. 0

    maybe it’s just because that you haven’t installed webpack or deleted npm_modules folder and reinstall all your packages with npm install but webpack wan’t in your package.lock.json

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search