v-for循环中的question组件,通过props传给子组件值时,子组件接受不到值。

v-for循环中的question组件,通过props传给子组件值时,子组件接受不到值。
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>自定义指令</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

<script src="js/flexible.js"></script>

<link rel="stylesheet" href="./css/index.css">

</head>

<body>

<div id="app">

<div class="questions">

        <div v-for="(item,index) in qtArr">

                <question :qtObj="item"></question>

        </div>

</div>

<script src="js/vue.min.js"></script>

<script>

//question component

    Vue.component('question', {

        props:{

            qtObj:{

            type:String,

            required:true

            }

    },

        template:` `,

        data() {

            return {

                dataObj:this.qtObj

        }

},

mounted(){

            console.log(this.qtObj);//打印出来一直是undefined 请大神指教

        }

})

var app =new Vue({

el:'#app',

data: {

page:1,

qtArr: [

{

num:1,

type:'radio',

title:'请问你的性别是?',

options: ["男","女"],

name:'sex',

},

{

num:2,

type:'checkbox',

title:'你喜欢的水果有哪些?',

options: ["apple","pear","banner","strawberry "],

name:'Fruit'

                },

{

num:3,

type:'text',

title:'简单介绍一下你自己吧!',

options: [],

name:'intro'

                }

],

},

})

</script>

</body>

</html>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。