Vue.js中如何将选中复选框的标签文本存入数组

Quasar的q-checkbox在v-model绑定数组时，会将选中项的value属性值存入数组。只需给每个复选框绑定value为对应的标签文本，即可自动完成选中标签的收集与取消选中时的移除：

修改后的模板代码 #

<template>
  <div class="q-gutter-sm">
    <q-checkbox dense v-model="add_info" label="Data Structures and Algorithms" color="teal" :value="`Data Structures and Algorithms`" /><br />
    <q-checkbox dense v-model="add_info" label="High Level Design" color="teal" :value="`High Level Design`" /><br />
    <q-checkbox dense v-model="add_info" label="Low Level Design" color="teal" :value="`Low Level Design`" /><br />
    <q-checkbox dense v-model="add_info" label="Development (Backend, Frontend, Fullstack)" color="teal" :value="`Development (Backend, Frontend, Fullstack)`" />
  </div>
</template>

修正后的脚本代码 #

（修正原代码中</srcipt>的拼写错误）

<script setup>
import { ref } from 'vue'

const add_info = ref([])
</script>

设置完成后，add_info数组会实时同步所有选中复选框的标签文本。例如选中前两项时，数组内容为：["Data Structures and Algorithms", "High Level Design"]

内容的提问来源于stack exchange，提问作者Vivek Kumar