问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

vue 2.0 自定义组件 v-for 数据访问不到

头像
子龙哦
    601614
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- v-for="item in items" -->
<template id = "row">
    <span>{{ cc.msg }}</span>   <span>note</span>
</template>


<ul id="example-1">
<item v-for="item in items" cc="item"></item>
</ul>

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<script>

    Vue.component('item', {
        name : 'item',
        template: '#row',
        props: ['cc']
    })

    var example1 = new Vue({
        el: '#example-1',
        data: {
            items: [
                {message: 'Foo' },
                {message: 'Bar' }
            ]
        }
    })
</script>

</body>
</html>

    如上图所示，item组件中访问不到数据，也没有提示错误

    vue.js组件化
    阅读 7.2k
    3 个回答
    得票最新
    头像
    陈安柱
      4k2319

      动态属性要用指令绑定，改为<item v-for="item in items" v-bind:cc="item"></item>
      或者简写为<item v-for="item in items" :cc="item"></item>

      头像
      西安小哥
        1.3k2150

        clipboard.png

        头像
        Jadder
          2
          新手上路，请多包涵

          自定组件中如果用到v-for 则v-for所在元素必须在一个<div>之内，因为vue根元素必须为一个，不能为多个。

          例子如下：
          错：
          Vue.component('child4for', {

          // 在 JavaScript 中使用 camelCase
props: ['items'],
template: '<span v-for="item in items" v-bind:title="item.text">{{ item.text }}</span>'

          });

          正确：
          Vue.component('child4for', {

          // 在 JavaScript 中使用 camelCase
props: ['items'],
template: '<div><span v-for="item in items" v-bind:title="item.text">{{ item.text }}</span></div>'

          });

          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题