从多个v复选框字段获取/记录值,这些字段包含用于自定义输入的v文本字段

时间:2019-06-28 19:19:28

标签: javascript html vue.js axios vuetify.js

我在这里想要实现的目的很简单。我在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>

0 个答案:

没有答案