Vue js将多个选择框值(数组)发送到文本区域并追加该值。

<template>
  <div>
    <div>
      <label for="option1">选项 1：</label>
      <input type="checkbox" id="option1" v-model="selectedOptions" value="选项 1">
    </div>
    <div>
      <label for="option2">选项 2：</label>
      <input type="checkbox" id="option2" v-model="selectedOptions" value="选项 2">
    </div>
    <div>
      <label for="option3">选项 3：</label>
      <input type="checkbox" id="option3" v-model="selectedOptions" value="选项 3">
    </div>
    <button @click="appendSelectedOptions">追加选中的值</button>
    <div>
      <textarea v-model="appendedValues"></textarea>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOptions: [], // 存储选中的选项值的数组
      appendedValues: '' // 存储追加的值的文本区域内容
    }
  },
  methods: {
    appendSelectedOptions() {
      this.appendedValues += this.selectedOptions.join(' ') + '\n'; // 将选中的选项值以空格分隔并追加到文本区域中
    }
  }
}
</script>