发新贴  快速回复

关于Vue-router和Vue.js结合写的音乐APP遇见了问题

妙味用户109032
2017-11-05 16:41

var songs = [{"id":1,"name":"Knockin' On Heaven's Door","artist":"Guns N' Roses","duration":342,"music":"http://127.0.0.1:2080/uploads/Guns N' Roses - Knockin' On Heaven's Door.mp3","poster":"http://127.0.0.1:2080/uploads/Guns N' Roses.jpg","lyric":"http://127.0.0.1:2080/uploads/Guns N' Roses - Knockin' On Heaven's Door.lrc"}]

这是音乐数据

const List = {
        template: template('list'),
        data: function(){
            return {
                list: songs
            }
        }
    }

<script type="text/v-template" id="list_tmp">
      <div class="list">
        <ol>
          <li v=for="child in list">
            <router-link :to="{name: 'item',params: {id:child.id}}">
              <span class="num">{{child.id}}</span>
              <div class="info">
                <h3 class="title">{{child.name }}</h3>
                <span class="artist">{{child.artist}}</span>
              </div>
              <span class="duration">{{child.duration}}</span>
              <div class="photo"><img src="assets/img/谭咏麟.jpg" alt="谭咏麟"></div>
            </router-link>
          </li>
        </ol>
      </div>
</script>
在这里控制台提示child不存在,并且我在控制台打印了songs存在,但是list不存在,是不是我那个传值没有写对呢?
 
老王爱js
你用的是本地环境,没看见你在哪里使用这个List的组件呢?
2017-11-06 11:19  回复本帖
妙味用户109032

老王爱js 2017-11-06 11:19发表的内容:

你用的是本地环境,没看见你在哪里使用这个List的组件呢?
老师,今天没带那个电脑,晚上回去我把所有文件传一下,麻烦您看看,谢谢!
2017-11-06 13:46  回复本帖
妙味用户109032

老王爱js 2017-11-06 11:19发表的内容:

你用的是本地环境,没看见你在哪里使用这个List的组件呢?
不过我组件肯定用了
2017-11-06 13:47  回复本帖
妙味用户109032

老王爱js 2017-11-06 11:19发表的内容:

你用的是本地环境,没看见你在哪里使用这个List的组件呢?
老师,这是那个List组件的使用
(function(Vue){
const template = function(id){
return document.getElementById(id+'_tmp').innerHTML
}
const Home = {
template: template('home')
}
const List = {
template: template('list'),
data: function(){
return {
list: songs
}
}
}
console.log(songs)
const Item = {
template: template('item')
}
const routes = [
{path:'/home',component:Home,name:'home'},
{path:'/songs',component:List,name:'list'},
{path:'/songs/:id',component:Item,name:'item'},
// 给路由重新定向,默认是/home的路由
{path: '*',redirect: '/home'}
]
const router = new VueRouter({
routes
})
const app = new Vue({
router
}).$mount('#app')
})(Vue)
2017-11-06 19:29  回复本帖
 
老王爱js

妙味用户109032 2017-11-06 19:29发表的内容:

老师,这是那个List组件的使用
(function(Vue){
const template = function(id){
return document.getElementById(id+'_tmp').innerHTML
}
const Home = {
template: template('home')
}
const List = {
template: template('list'),
data: function(){
return {
list: songs
}
}
}
console.log(songs)
const Item = {
template: template('item')
}
const routes = [
{path:'/home',component:Home,name:'home'},
{path:'/songs',component:List,name:'list'},
{path:'/songs/:id',component:Item,name:'item'},
// 给路由重新定向,默认是/home的路由
{path: '*',redirect: '/home'}
]
const router = new VueRouter({
routes
})
const app = new Vue({
router
}).$mount('#app')
})(Vue)
把你写的文件上传一下,我运行下看看,这样有点看不出来问题
2017-11-08 10:06  回复本帖
妙味用户109032

老王爱js 2017-11-08 10:06发表的内容:

把你写的文件上传一下,我运行下看看,这样有点看不出来问题

好的,但是文件有点大,咱只可以允许不超过5M的文件上传,肿么办?

2017-11-10 09:21  回复本帖
 
老王爱js

妙味用户109032 2017-11-10 09:21发表的内容:

好的,但是文件有点大,咱只可以允许不超过5M的文件上传,肿么办?

你不要上传node_moudels文件
2017-11-10 18:05  回复本帖
妙味用户109032

这个是我的文件

附件下载:
 
2017-11-10 20:15  回复本帖
妙味用户109032

老王爱js 2017-11-10 18:05发表的内容:

你不要上传node_moudels文件
恩恩,上传了
2017-11-10 20:15  回复本帖
登录 后才可以发表回复