鍍金池/ 問答/HTML/ vue使用iViewui組件,循環(huán)綁定radio、checkbox組件的v-mo

vue使用iViewui組件,循環(huán)綁定radio、checkbox組件的v-model值,如何獲取選中的數(shù)據(jù)并提交?

        <Row type="flex" justify="start" v-for="(item,index) in questions" :key="item.id">
            <div class="question">
                <h5 class="question_title">{{index+1}}.{{item.title}}</h5>
                <RadioGroup v-if="item.questionType == '單選題'" v-model="answerInfo[index].singlechoice_default" vertical>
                    <Radio v-for="(it,i) in item.options" :label="it.id" :key="it.id" :checked.native="item.checked">
                      <span v-if="it.optionContent.indexOf('#OTHER#') == '-1'">{{it.optionContent}}</span>
                      <span v-else>其他<Input v-if="it.optionContent.indexOf('#OTHER#') != '-1'"></Input></span>
                    </Radio>
                </RadioGroup>
                <CheckboxGroup v-else-if="item.questionType == '多項選擇題'" v-model="answerInfo[index].multichoice_default">
                    <Checkbox v-for="(it,i) in item.options" :label="it.id" :key="it.id" :checked.native="item.checked">
                      <span v-if="it.optionContent.indexOf('#OTHER#') == '-1'">{{it.optionContent}}</span>
                      <span v-else>其他<Input v-if="it.optionContent.indexOf('#OTHER#') != '-1'"></Input></span>
                    </Checkbox>
                </CheckboxGroup>
                <Input v-else v-model="item.input_value" type="textarea" :rows="6" placeholder="請輸入內(nèi)容..."></Input>
            </div> 
        </Row>

  data() {
    return {
      questionId:'',
      questionDetail: {},
      questions: [],
      singlechoice_default: '',
      multichoice_default:[],
      answerInfo: [],
    };
  },

  created() {
    this.getQuestionDetail();
  },
    getQuestionDetail() {
      this.$get("course/list.json",{
          courseId: this.$route.query.id
        },response => {
          this.questionDetail = response.data[0];
          this.questionId = response.data[0].questionId;          
          this.getDetail(this.questionId);
        }
      );
    },
    getDetail(questionid) {
      this.$get("info/list.json",{
          questionid: questionid
        },response => {         
          response.data.forEach((item,index,arr) => {
            if (item.questionType === "多項選擇題") {
                item.multichoice_default = this.multichoice_default;                
            } else if (item.questionType === "單選題") {
                item.singlechoice_default = this.singlechoice_default;
            } else {
              
            }
          });
          this.answerInfo = response.data;           
          this.questions = response.data;
        }
      );
    },
  }

圖片描述

圖片描述
vue新手,求各位大神指教。

如何獲取選中的數(shù)據(jù)并提交?

回答
編輯回答
傻叼

<RadioGroup @on-change="handleChange()" v-if="item.questionType == '單選題'" v-model="answerInfo[index].singlechoice_default" vertical>
</RadioGroup>

method里面handleChange(val)取val

2018年5月18日 16:07
編輯回答
怣痛

change事件吧item傳出來
或者看文檔提供事件沒有

2017年7月25日 07:59
編輯回答
笨小蛋

可以使用樓上的on-change 或者直接在watch中監(jiān)聽answerInfo

2018年9月12日 21:19
編輯回答
青瓷

好像是直接循環(huán)遍歷answerInfo獲取里面的singlechoice_defaultmultichoice_default就可以了。。。

呵呵,好丟人,捂臉-_-||

2018年1月3日 16:30