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

<!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组件中访问不到数据,也没有提示错误

回答:

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

回答:

clipboard.png

回答:

自定组件中如果用到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>'

});

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注