vueよくある問題(一)は識別できません。
10102 ワード
問題の説明
MainSec.vue
メイン.jsにはevueresourceパッケージが導入されていないか、またはnpmにはこのパッケージがインストールされていないかを確認してから、main.jsに導入を追加します。
mail.js
vue.esm.js?71e4:479 [Vue warn]: Error in created hook: "ReferenceError: $http is not defined"
found in
---> at D:\vue\Cnodejs\test\VueCnodeJs\src\components\MainSec.vue
at D:\vue\Cnodejs\test\VueCnodeJs\src\App.vue
vue.esm.js?71e4:566 ReferenceError: $http is not defined
at VueComponent.created (MainSec.vue?9425:20)
at callHook (vue.esm.js?71e4:2665)
at VueComponent.Vue._init (vue.esm.js?71e4:4226)
at new VueComponent (vue.esm.js?71e4:4396)
at createComponentInstanceForVnode (vue.esm.js?71e4:3678)
at init (vue.esm.js?71e4:3495)
at createComponent (vue.esm.js?71e4:5147)
at createElm (vue.esm.js?71e4:5090)
at createChildren (vue.esm.js?71e4:5218)
at createElm (vue.esm.js?71e4:5123)
コードMainSec.vue
<template>
<div class="secDiv">
<div v-for="item of content">
<p>{{item}}p>
div>
div>
template>
<script>
export default {
name: 'MainSection',
data () {
return {
content: [],
}
},
created(){
this.$http({
url: 'https://cnodejs.org/api/v1/topics',
method: 'get',
params: {
page: 1,
limit: 10,
mdrender: 'false',
},
}).then((res) => {
this.content = res.body.data;
console.log(this.content);
}).catch((res) => {
console.log('MaiSec.vue: ', res);
});
},
};
script>
<style scoped>
.secDiv{
width: 60%;
height: 40rem;
background: #fff;
border: 1px solid #ddd;
}
p{
color: red;
}
style>
アプリ.vue<template>
<div id="app">
<main-sec>main-sec>
<side-sec>side-sec>
div>
template>
<script>
import mainSec from './components/MainSec';
import sideSec from './components/SideSec';
export default {
name: 'app',
components: {
mainSec,
sideSec
}
};
script>
<style scoped>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
display: flex;
justify-content: space-around;
}
style>
原因メイン.jsにはevueresourceパッケージが導入されていないか、またはnpmにはこのパッケージがインストールされていないかを確認してから、main.jsに導入を追加します。
mail.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import VueResource from 'vue-resource'
Vue.use(VueResource);
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '' ,
components: { App }
});