从模板中检索复选框输出并将其发送到辅助视图

<template>
  <div>
    <form @submit.prevent="handleSubmit">
      <label v-for="option in options" :key="option.id">
        <input type="checkbox" :value="option.id" v-model="selectedOptions">
        {{ option.name }}
      </label>
      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { id: 1, name: '选项1' },
        { id: 2, name: '选项2' },
        { id: 3, name: '选项3' }
      ],
      selectedOptions: []
    };
  },
  methods: {
    handleSubmit() {
      // 将选中的选项发送到辅助视图
      this.$emit('submit', this.selectedOptions);
    }
  }
};
</script>

<template>
  <div>
    <h2>选中的选项</h2>
    <ul>
      <li v-for="optionId in selectedOptions" :key="optionId">
        {{ getOptionName(optionId) }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ['selectedOptions'],
  methods: {
    getOptionName(id) {
      // 假设有一个方法可以从选项列表中获取名称
      const option = this.options.find(opt => opt.id === id);
      return option ? option.name : '未知选项';
    }
  },
  created() {
    // 假设从父组件接收选中的选项
    this.selectedOptions = this.$parent.selectedOptions;
  }
};
</script>