我在这里想要实现的目的很简单。我在v项目组内显示了多个复选框,因此我的用户可以选择多个可能的选项。我可以使用该代码,但是我还需要一个名为“其他”的复选框以接受自定义类型的输入。我设法将复选框和文本字段嵌套在一起。现在,我只需要能够捕获用户的文本输入即可。
Here is a JSFiddle so you can edit easily
<v-layout row wrap style="background: white;">
<v-flex xs12 class="px-3 py-3">
<v-card class="mt-2 mb-4">
<v-card-text>
<h1>Who are the teams that are driving intent, advising, implementation, and are informed of the change(s).</h1>
<h2 style="color: red">Check all that apply</h2>
</v-card-text>
</v-card>
<!-- Checkbox Select Strategy and Analysis Teams -->
<v-item-group>
<v-checkbox
v-for="items in teams"
:key="items.text"
:label="`${items.text}`"
:value="items.value"
hide-details
v-model="form.CPStrategy"
:rules="StrategyAndAnalysisRules" required
>
</v-checkbox>
<v-layout align-center>
<v-checkbox v-model="form.CPStrategy" :key="items.text" class="shrink mr-2" label="Other" value="OtherStrategy" hide-details></v-checkbox>
<v-text-field hint="Please Specify Other Teams Here"></v-text-field>
</v-layout>
</v-item-group>
<script>
import Vue from 'vue'
import { mapActions, mapState, mapGetters } from 'vuex'
import { axios } from '@/plugins/axios'
import PulseLoader from 'vue-spinner/src/PulseLoader.vue'
export default {
name: 'CP-Intake',
components: { PulseLoader },
btn: 'Submit',
//form input variables inside form object
form: {
RequestorName: '',
RequestorEmail: '@capitalone.com',
NameOfRequest: '',
SelectedPrioritizedInitiative: '',
RequestDescription: '',
PrimaryIntentTeam: '',
CPStrategy: [],
CPProductOpsTeams: [],
CPTechPods: [],
CPExternalTeams: [],
BusinessValue: '',
TimeCriticality: '',
RiskReduction: '',
},
</script>