Template部分
<template>
<div class="q-pa-md">
<q-form @submit="onSubmit" class="q-gutter-md">
<div class="q-pa-sm rounded-borders" :class="$q.dark.isActive ? 'bg-grey-9' : 'bg-grey-2'">
Preferred genre:
<q-option-group
name="preferred_genre"
v-model="preferred"
:options="options"
color="primary"
inline
/>
</div>
<div class="q-pa-sm rounded-borders" :class="$q.dark.isActive ? 'bg-grey-9' : 'bg-grey-2'">
Accepted genres:
<q-option-group
name="accepted_genres"
v-model="accepted"
:options="options"
type="checkbox"
color="primary"
inline
/>
</div>
<div>
<q-btn label="Submit" type="submit" color="primary"/>
</div>
</q-form>
<q-card
v-if="submitResult.length > 0"
flat bordered
class="q-mt-md"
:class="$q.dark.isActive ? 'bg-grey-9' : 'bg-grey-2'"
>
<q-card-section>Submitted form contains the following formData (key = value):</q-card-section>
<q-separator />
<q-card-section class="row q-gutter-sm items-center">
<div
v-for="(item, index) in submitResult"
:key="index"
class="q-px-sm q-py-xs bg-grey-8 text-white rounded-borders text-center text-no-wrap"
>{{ item.name }} = {{ item.value }}</div>
</q-card-section>
</q-card>
</div>
</template>
Script部分
<script>
import { ref } from 'vue'
export default {
setup () {
const submitResult = ref([])
return {
preferred: ref('rock'),
accepted: ref([]),
submitResult,
options: [
{
label: 'Rock',
value: 'rock'
},
{
label: 'Funk',
value: 'funk'
},
{
label: 'Pop',
value: 'pop'
}
],
onSubmit (evt) {
const formData = new FormData(evt.target)
const data = []
for (const [ name, value ] of formData.entries()) {
data.push({
name,
value
})
}
submitResult.value = data
}
}
}
}
</script>
提交结果示例
Submitted form contains the following formData (key = value):
preferred_genre = xxx(所选择项)
accepted_genres = yyy
accepted_genres = zzz