v-for循环中的question组件,通过props传给子组件

2019-02-18  本文已影响0人  草原上的骆驼

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>

上一篇 下一篇

猜你喜欢

热点阅读