vue questionnaire design notes (question: call control according to different topic types)
ps: The overall length of the code is quite large, and only the relevant parts of the code are shown here.
First, we traverse the questions in this questionnaire and bind them in the form form.

To call different controls according to different types of questions, you only need to use v-if of vue to judge the type of questions. (Initially, forget this thing, think for a long time, but also think about judging in js, the way to generate html, almost died). The main part is to design different controls (components). Here we take a single topic as an example.

<el-form v-show="show" v-model="wjQuestTable" ref="wjQuestTable" :rules="rules">
      <el-form-item
        v-for="(wjQuest,index) in wjQuestTable"
        :key="'wjQuestTable.'+ index + 'questOrder'"
        :prop="wjQuest.fillSign"
      >
      <span v-if="wjQuest.questTypeId=='Single choice question'">
              <component is="radiotemp" :msgOption="wjQuest.wjQuestOption" :msgWjQuest="wjQuest" @getdata="get"></component>
            </span>

Is represents the bound child component, msgOption = "wjQuest.wjQuestOption": msgWjQuest = "wjQuest" is the data passed from the parent component to the child component, and @getdata='get'GetData is the event passed from the child component to the parent component, and the parent component receives the data through the get method.

Here we will get to know the difference between is and: is.

Sub-component part: (a single topic template)

const radiotemp = {
    template: '<el-row>\n' +
      '  <el-col :span="6">\n' +
      // '{{zWjQuestTitle}}\n'+
      '    <el-radio-group v-model="currentOption" @change="send">\n' +
      '      <el-radio\n' +
      '        v-for="(option,index) in msgOption"\n' +
      '        :key="option.optionId"\n' +
      '        :prop="option.optionValue"\n' +
      '        :label="option.optionValue"\n' +
      '        style="display: block"\n' +
      '      >\n' +
      '        {{option.optionValue}}<br>\n' +
      '      </el-radio>\n' +
      '    </el-radio-group>\n' +
      '  </el-col>\n' +
      '</el-row>',
    props: ['msgOption', 'msgWjQuest'],
    data() {
      return {
        currentOption: '',
        zWjQuest: this.msgWjQuest,
      }
    },
    watch: {
      msgWjQuest(newVal, oldVal) {
        this.zWjQuest = newVal;
      }
    },
    methods: {
      send() {
        this.$emit('getdata', [this.currentOption, this.zWjQuest.wjQuestTitle])
      }
    },
  };

Because it is a local component designed in a vue file, the data between components of different files is not considered for the time being, so the code of the sub-component is written in the JS part of the vue file (it is suggested that the template part should be written in the html part first).
props: Receives the data passed by the parent component.
msgWjQuest in the listener of the zWjQuest binding subcomponent in data is used to listen for data changes passed in the parent component
Binding @change in the template calls the send method, using this.$emit('event name', data) to pass data from the child component to the parent component.

get method of parent component

//Getting data from subcomponents
      get(data) {
        for (let i in this.resultMain.resultDetial) {
          if (data[1] == this.resultMain.resultDetial[i][1]) {
            this.resultMain.resultDetial.splice(i, 1);
          }
        }
        this.resultMain.resultDetial.push(data);
      },

this.resultMain.resultDetial is used to store detailed results of questionnaires, where it is judged whether data has been added repeatedly.

Some experience of vue learning, and self understanding, I do not hesitate to give advice. Thank you.