VUE JS 2 + WEBPACK无法读取属性' get'未定义的VUE RESOURCE

时间:2016-12-06 16:06:31

标签: webpack vue-router vue-resource vue.js

我感到迷茫。

我已经将vue-cli用于我的项目。 我安装了vuerouter。 一切都好。 我想在vue组件中使用视图资源,但我无法找到它不起作用的原因。

这是我的main.js(我使用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'))
})




当我去/#/ product / seo 有代码:



<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>
&#13;
&#13;
&#13;

我在JS控制台中遇到此错误。

  

seo.vue?468d:18 Uncaught TypeError:无法读取属性&#39; get&#39;未定义的(...)

Vue资源在 main.js 中运行良好。

所以,我认为这是因为视图是在应用之前加载的。我不知道该怎么做。 抱歉,英语不好。

2 个答案:

答案 0 :(得分:1)

好的,我找到了IT。

在我的seo.vue中我说了这个:

<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>

dit工作正常。

答案 1 :(得分:0)

可能仅仅是因为您尚未安装webpack或删除npm_modules文件夹并使用 $w.onReady(function () { $w('#textbox').onReady(){ \\some code that links to KaTeX } }); 重新安装所有软件包,但是webpack却不在您的npm install