老师，在这一题里我怎么在第一个item里面打印出数组list里面的title和arrlist下面的content

来源：4-7 作用域插槽

革命军总部

2018-11-02

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js" ></script>
	</head>
	<body>
		<div id="app">
			<item  :list="list">
				<template slot-scope="props">
					<li>
						{{props.item}}
					</li>
				</template>
			</item>
			
			<item  :list="news">
				<template slot-scope="props">
					<li>
						{{props.item}}
					</li>
				</template>
			</item>
		</div>
		<script>
			Vue.component("item",{
				data(){
					return {
						
					}
				},
				props:["list"],
				template:`
					<ul>						
						<slot v-for="item in list" :item="item"></slot>
					</ul>
				`,
			})
		
			new Vue({
				el:"#app",
				data:{
					list:{
						title:"这是标题1",
						arrlist:[
							{"content":"内容1"},
							{"content":"内容2"},
							{"content":"内容3"},
							{"content":"内容4"},
						]
					},
					news:[1,2,3,4]
				}
			})
		</script>
	</body>
</html>

``

写回答

1回答

慕侠3388185

2018-11-04

已采纳

list数据结构定义不正确,是数组而不应该是对象,对象是不能使用v-for遍历的,就算要遍历也只能遍历arrlist,要先把arrlist取出来.修改一下list的数据结构,将它改成数组,然后使用插槽遍历,再使用v-for遍历arrlist;
<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script type="text/javascript" src="./vue.js" ></script>
   </head>
   <body>
       <div id="app">
           <item :list="list">
               <template slot-scope="props">
                   <li>
                       {{props.item.title}}
                   </li>
                   <li v-for="item in props.item.arrlist" :item="item.content">
                       {{item.content}}
                   </li>
               </template>
           </item>

           <item :list="news">
               <template slot-scope="props">
                   <li>
                       {{props.item}}
                   </li>
               </template>
           </item>
       </div>
       <script>
           Vue.component("item",{
               data(){
                   return {

                   }
               },
               props:["list"],
               template:`
                   <ul>
                       <slot v-for="item in list" :item="item" ></slot>
                   </ul>
               `,
           })

           new Vue({
               el:"#app",
               data:{
                   list:[{
                       title:"这是标题1",
                       arrlist:[
                           {"content":"内容1"},
                           {"content":"内容2"},
                           {"content":"内容3"},
                           {"content":"内容4"},
                       ]
                   }
                       ],
                   news:[1,2,3,4]
               }
           })
       </script>
   </body>
</html>