首页新闻找找看学习计划

[Vue warn]: Cannot find element: #indexTop ;不能在每一个vue文件中进行独立的控制么

0
悬赏园豆:30 [已解决问题] 解决于 2018-02-09 11:45

项目是用vue-cli生成的,然后在webstrom打开

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <base href="src/assets/">
    <meta charset="utf-8">
    <title>fuqing_studio</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="/dist/build.js"></script>
    <style>
      @import "css/base.css";
      @import "css/patient_education.css";
      @import "css/swiper.min.css";
      @import "css/mine.css";
    </style>
  </body>
</html>

main.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Index from './component/indexTop.vue'

new Vue({
  render: h => h(Index),
}).$mount('#app')

我希望进去的页面是首页顶部的轮播图

<template>
  <div id="indexTop">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div v-for="item in banners" @click="jumpUrl($index)" class="swiper-slide img"><img src="{{item.path}}" alt=""></div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
  </div>
</template>

<script>

  import Vue from 'vue'
  import axios from 'axios'

  Vue.prototype.$http = axios
   new Vue({
      data:{
        banners:{ },
      },
      methods: {
        jumpUrl: function(index){

        }
      },
      mounted: function () {
        this.$nextTick(function () {
          var self = this;
          axios.get('http://localhost:66/studio/banner')
            .then(function(res){
              console.log(res.data);
              self.banners = res.data
            })
            .catch(function(err){
              console.log(err);
            })
        });
      }
    }).$mount('#indexTop')
</script>

然后就报错了,改了好半天都不行

花生喂龙的主页 花生喂龙 | 初学一级 | 园豆:13
提问于:2018-01-31 16:37
< >
分享
最佳答案
1

说得这么清楚了,你英语是语文老师教的?

src={{item.path}}改成 :src="item.path"

 

还有既然是vue-cli,那就只需要main.js里面的那个vue实例就行了,其他的都是组件,怎么访问组件,就得使用vue-router了。你这存在两个vue实例了。

收获园豆:30
~冰 | 菜鸟二级 |园豆:497 | 2018-01-31 17:16
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册