vue实现自定义多选与单选的答题功能

Vue实现自定义多选与单选的答题功能攻略

确定组件结构

首先，确定答题功能所需的组件结构。可以考虑使用三个组件来实现：Questionnaire（问卷调查）组件作为父组件，Question（问题）组件作为子组件，Option（选项）组件作为子组件。其中，父组件负责管理所有问题和答案，子组件则负责展示问题和选项。

创建Questionnaire组件

接下来，创建Questionnaire组件，并在其模板中引入Question组件。

<template>
  <div>
    <h1>问卷调查</h1>
    <question v-for="(q, index) in questions" :key="index" :question="q"></question>
    <button @click="submitAnswer">提交答案</button>
  </div>
</template>

<script>
import Question from './Question.vue';

export default {
  components: {
    Question,
  },
  data() {
    return {
      questions: [
        // 问题列表
      ],
    };
  },
  methods: {
    submitAnswer() {
      // 根据需要实现提交答案的逻辑
    },
  },
};
</script>

创建Question组件

在Question组件中，需要加载问题内容，并引入Option组件用于展示选项。

<template>
  <div>
    <h2>{{ question.title }}</h2>
    <option v-for="(option, index) in question.options" :key="index" :option="option" :single="question.single"></option>
  </div>
</template>

<script>
import Option from './Option.vue';

export default {
  components: {
    Option,
  },
  props: {
    question: {
      type: Object,
      required: true,
    },
  },
};
</script>

创建Option组件

Option组件将展示选项内容，并处理点击事件以实现选中与取消选中的逻辑。

<template>
  <div @click="toggleSelection" :class="{ selected: selected }">
    <span>{{ option.text }}</span>
  </div>
</template>

<script>
export default {
  props: {
    option: {
      type: Object,
      required: true,
    },
    single: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      selected: false,
    };
  },
  methods: {
    toggleSelection() {
      if (this.selected && this.single) {
        return;
      }
      this.selected = !this.selected;
    },
  },
};
</script>

<style>
.selected {
  background-color: #f5f5f5;
  font-weight: bold;
}
</style>

完成答题功能

至此，我们已经完成了组件的搭建。接下来，可以在Questionnaire组件的data选项中添加问题和选项的数据，以实现一个完整的答题功能。

data() {
  return {
    questions: [
      {
        title: "问题1",
        options: [
          {
            text: "选项1",
          },
          {
            text: "选项2",
          },
          {
            text: "选项3",
          },
        ],
        single: true, // 单选
      },
      {
        title: "问题2",
        options: [
          {
            text: "选项A",
          },
          {
            text: "选项B",
          },
          {
            text: "选项C",
          },
        ],
        single: false, // 多选
      },
    ],
  };
},

通过上述步骤，我们成功实现了一个简单的Vue答题功能，可以自定义问题和选项，并支持多选和单选。