VUE JS 2 + WEBPACK 无法读取未定义的 VUE 资源的属性“get" [英] VUE JS 2 + WEBPACK Cannot read property 'get' of undefined VUE RESOURCE
问题描述
我感到失落.
我在我的项目中使用了 vue-cli.我已经安装了 vuerouter.一切都好.我想在 vue 组件中使用视图资源，但我找不到为什么它不起作用.
这是我的 main.js(我正在使用 webpack)
从'vue'导入Vue从 'vue-router' 导入 VueRoutervar VueResource = require('vue-resource')Vue.use(VueRouter)Vue.use(VueResource)const 路由器 = 新的 VueRouter({路线:[{小路: '/'，组件:需要('./components/index.vue')},{路径:'/产品/库存'，组件:需要('./components/stock.vue')},{路径:'/产品/搜索引擎优化'，组件:需要('./components/seo.vue')},{路径:'/设置'，组件:需要('./components/settings.vue')}]})新的 Vue({el: '#app',路由器，数据: {消息:你好，Vue！"},已安装:() =>{console.log("APP 挂载")},渲染:h =>h(require('./App.vue'))})当我去/#/product/seo有代码:
<div id="应用程序">Seo tabs du fastmanager {{ message }}<input type="text" name="" v-model="message"></模板><脚本>导出默认{数据:() =>{返回 {消息:你好，伙计"}},已安装:() =>{console.log("SEO 安装")this.$http.get('/').then((response) => {//成功回调}, (响应) =>{//错误回调});}}<style lang="css"></style>
我在 JS 控制台中遇到了这个错误.
<块引用>seo.vue?468d:18Uncaught TypeError: 无法读取 undefined(...) 的属性get"
Vue 资源在 main.js 中运行良好.
所以，我认为这是因为视图是在应用程序之前加载的.我不知道怎么办.对不起，我的英语不好.
好的，我找到了.
在我的 seo.vue 中，我把这个:
<div id="应用程序">快速管理器的搜索引擎优化标签<textarea type="text" name="" cols="40" rows="10" v-model="message"></textarea><button type="button" v-on:click="test" name="button">Test</button></模板><脚本>var Vue = require('vue')导出默认{数据:() =>{返回 {留言:咕咕"}},安装:函数(){控制台日志(这个)},方法: {测试:函数(){Vue.http.get('https://jsonplaceholder.typicode.com/posts/1').then((response) => {控制台日志(成功"，响应)；this.message = 响应}, (响应) =>{控制台日志(错误"，响应)；//错误回调});}}}<style lang="css"></style>
工作正常.
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.
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.
这篇关于VUE JS 2 + WEBPACK 无法读取未定义的 VUE 资源的属性“get"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
