Получение / запись значения из нескольких полей v-checkbox, которые содержат v-текстовое поле для пользовательского ввода - PullRequest
Новая
       21

Получение / запись значения из нескольких полей v-checkbox, которые содержат v-текстовое поле для пользовательского ввода

1 голос
/ 28 июня 2019

То, чего я пытаюсь достичь, достаточно просто.У меня есть несколько флажков, отображаемых внутри группы v-item, поэтому мой пользователь может выбрать несколько возможных вариантов.У меня этот код работает, но мне также нужен флажок «Другой», чтобы принять пользовательский ввод.Мне удалось вложить флажок и текстовое поле вместе.Теперь мне просто нужно иметь возможность захватить ввод текста пользователем.

Вот JSFiddle, поэтому вы можете легко редактировать 

<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>
...