javascript - 我们可以在 vue js 中的单选按钮单击上附加嵌套问题吗？

Question

我有两张表，一张是 main_question，第二张是 sub_main_question。我想在单击单选按钮时显示问题。

默认情况下，子问题是隐藏的，当我单击主问题单选按钮时，首先显示子问题，当我单击子问题单选按钮时，然后显示下一个子问题。

此代码显示主问题和子问题的所有问题

<form ref="form" @submit.prevent="QuestionSubmit(module_insert)" id="formQues">
    <div v-for="(row,key)  in ques_ext" :key="key">
        <div class="row mb-3">
            <div class="col-6 col-lg-6">
                <div class="row">
                    
                    <div class="col-1 col-lg-1 px-0 mx-0 d-flex">
                        <i @click="extra_qustn_hide(row.id)" style="cursor:pointer"><span class="fas fa-minus-circle hide" :id="'remove_questn'+row.id"></span></i>
                        <h5 class="ml-2">{{row.id}}.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h5>
                    </div>
                    <div class="col-10 col-lg-10">
                        <h5>{{row.question}}</h5>
                    </div>
                </div>
                
            </div>                          
            <div class="col-2 col-lg-2 text-center">
                <input type="radio" :name="'ques_answer'+key"   :value="row.score_no" style="height: 26px; width: 26px" required>
            </div>
            <div class="col-2 col-lg-2 text-center">
                <input type="radio" :name="'ques_answer'+key"  :value="row.score_yes" style="height: 26px; width: 26px">
            </div>
            <div class="col-1 col-lg-1 text-center">
                <input type="radio"  :name="'ques_answer'+key" :value="row.score_yes2" style="height: 26px; width: 26px ">
            </div>
            <div class="col-1 col-lg-1 text-center">
                <input type="radio"  :name="'ques_answer'+key"  :value="row.score_yes2" style="height: 26px; width: 26px">
            </div>
            <div class="row col-12 float-right" v-for="(value,index) in row.ques_extra" :key="index" :id="'exta_quest_append'+row.id">

                <div class="row col-6 col-lg-6" >
                    <div class="row">
                        <div class="col-1 col-lg-1">
                            <h5>{{row.id}}a.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h5>
                        </div>
                        <div class="col-11 col-lg-11">
                            <h5>{{value.question}}</h5>
                        </div>
                    </div>
                    <!-- <h5>{{index+1+1}}.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{value.question}}</h5> -->
                </div>

                <div class="col-2 col-lg-2 text-center">
                    <input type="radio"   :name="'extra_ques_answer_'+row.id+'_'+index" :value="row.score_no" style="height: 26px; width: 26px"  required >
                </div>
                <div class="col-2 col-lg-2 text-center" >
                    <input type="radio"      :name="'extra_ques_answer_'+row.id+'_'+index" :value="row.score_yes" style="height: 26px; width: 26px;margin-left:16px;" >
                </div>
                <div class="col-1 col-lg-1 text-right" >
                    <input type="radio"    :name="'extra_ques_answer_'+row.id+'_'+index" :value="row.score_yes2" style="height: 26px; width: 26px" >
                </div>
                <div class="col-1 col-lg-1 text-right">
                    <input type="radio"  :name="'extra_ques_answer_'+row.id+'_'+index"  :value="row.score_yes2" style="height: 26px; width: 26px">
                </div>
                <div >
                <input type="hidden" :name="'extra_qust_id_'+index" :value="value.id"  >
                </div>
            </div>  
        </div>
        
    </div>
    
    
    <div class="form-group pb-4 ">
        <div class="float-right">
            <button type="submit"  class=" text-white  btn-lg pl-5 pr-5 btnUp">SAVE</button>
        </div>
    </div>
</form>

来自控制器的数据响应

您可以在此屏幕上看到简短的我有一个主要问题和两个针对主要问题的子问题，我想显示第一个子问题，当我单击主要问题单选按钮然后单击第一个子问题时问题单选按钮然后打开第二个子问题等。

谢谢

标签： javascriptphpjqueryvue.js