So i have one grandparent component which has this code:
<template>
<div>
<Question qtype="single" qroot="1">
<Answer qpoints="5" aid="1" qcorrect>Option 1</Answer>
<Answer qpoints="0" aid="2">Option 2</Answer>
</Question>
</div>
</template>
<style>
</style>
<script>
import Question from "~/components/render/Question";
import Answer from "~/components/render/Answer";
export default {
components: {
Question,
Answer
}
};
</script>
Parent component:
<template>
<div>
<slot v-bind="$props"></slot>
</div>
</template>
<style>
</style>
<script>
export default {
props: ['qtype','qroot']
};
</script>
Child:
<template>
<div>
{{$props}}
<li style="clear: left;">
<input v-if="qtype == 'single'" :id="'qid-'+qid" type="radio" :name="qroot" :value="qid" style="float:left" />
<input v-if="qtype == 'multiple'" :id="'qid-'+qid" type="checkbox" :name="qroot" :value="qid" style="float:left" />
<label style="float:left;margin-left:5px" :for="'qid-'+qid">
<slot></slot>
</label>
</li>
</div>
</template>
<style>
</style>
<script>
export default {
props: ["qtype", "qpoints", "qcorrect", "qroot", "aid"]
};
</script>
I tried to use v-bind, regular prop passing like this ':qtype="qtype"' but it doesn't seem to work. How can i pass "qtype" and "qroot" props to the grandchild component?