the data passed into the subcomponents is that the undefined, novice doesn"t understand Vue very well.
<body>
<div id="app" v-cloak>
<div v-for="(question,index) in questions">
<div v-show="currentQuestion==(index+1)">
<div class="question-title">{{index+1}}:{{question.name}}</div>
<!-- html -->
<singleChoice v-show="question.type==1" v-bind="questions[index]"></singleChoice>
<MultiPleChoice v-if="question.type==2" v-bind="question"></MultipleChoice>
<essayQuestion v-if="question.type==3" ></essayQuestion>
</div>
</div>
<button id="reset"></button>
<button id="last"></button>
<button id="next"></button>
</div>
<script src="./js/vue.js"></script>
<script src="./js/singleChoice.js"></script>
<script src="./js/MultipleChoice.js"></script>
<script src="./js/essayQuestion.js"></script>
<script src="./js/main.js"></script>
<script>
var app=new Vue({
el:"-sharpapp",
/*question type 1="" 2="" 3=""*/
data:{
currentQuestion:1,//
//
questions:[{
name:"",
type: 1,
content:["","",""]
},{
name:"",
type: 2,
content:["","",""]
},{
name:"",
type: 2,
content:["","",""]
},{
name:"",
type: 3
}],
//
answer:[{
},]
}
})
</script>
</body> name:"singleChoice",
props:{
question:{
type:Object,
// default:function(){return {naem:"",type:1; content:[]}}
}
},
data:function(){
return{
currentQuestion:this.question
}
},
template:"\
<form action="" method="get">\
<input v-for="cont in currentQuestion.content" type="radio" name="currentQuestion.name" value="cont">{{cont}}</input>\
</form>",
});
that is, currentQuestion=undefined
Thank you!
