首页 文章

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

提问于
浏览
2

我感到失落 .

我已经将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>

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

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

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

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

1 回答

  • 1

    好的,我发现了它 .

    在我的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工作正常 .

相关问题