我只想显示用户选择的复选框的名称，而不是页面底部摘要中的id＃。
我已尝试通过两种方式来实现此目的，即在v-内动态呈现{{item}}，该方法可用于id而不是名称。接下来，我尝试在CP Tech Pods部分有条件地显示4
v-if。我只是不知道如何实现它。我正在尝试检查id =所选复选框的值，但是我必须做错了事。
这有点讽刺，因为我有条件地准确渲染了我不需要id的东西，但是当我提交POST时我需要该值，我只是不想将其显示给用户。
Here is a jsfiddle version for convenience
<template>
<div class="fadein">
<div class="container">
<div class="parallax">
<!-- Header begin -->
<header role="banner">
<v-toolbar app absolute color="#004977">
<img class="logo" src="../../assets/cap_logo.png"/>
<v-toolbar-title class="white--text subheading font-weight-thin pl-5">
<h1 class="title1">Customer Protection Initiative Intake Form</h1>
</v-toolbar-title>
</v-toolbar>
</header>
<!-- Header End -->
<!-- CP Intake Form Begin -->
<v-container class="pt-5">
<v-form v-if="!showSpinner && !showThanks" ref="form" style="background: white;" @submit="addJob" v-model="valid">
<div class="formContainer pt-4">
<div>
<div class="formWrapper">
<v-toolbar color="#004977" dark>
<v-toolbar-title>Impacted Teams and Stakeholders</v-toolbar-title>
</v-toolbar>
<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="Other6" value="Other" hide-details></v-checkbox>
<v-text-field hint="Please Specify Other Teams Here"></v-text-field>
</v-layout>
</v-item-group>
<v-card class="mt-2 mb-4">
<v-card-text>
<h1>Which Customer Protection Product and Ops Teams are Impacted?</h1>
<h2 style="color: red">Check all that apply</h2>
</v-card-text>
</v-card>
<!-- Checkbox Select Product and Ops Teams -->
<v-checkbox
v-for="items in teams3"
:key="items.text"
:label="`${items.text}`"
:value="items.value"
hide-details
v-model="form.CPProductOpsTeams"
:rules="ProductOpsRules"
required
></v-checkbox>
<v-layout align-center>
<v-checkbox v-model="form.CPProductOpsTeams" class="shrink mr-2" label="Other" value="Other7" hide-details></v-checkbox>
<v-text-field hint="Please Specify Other Product/Ops Teams Here"></v-text-field>
</v-layout>
<v-card class="mt-2 mb-4">
<v-card-text>
<h1>Which Customer Protection Tech Pods are Needed?</h1>
<h2 style="color: red">Check all that apply</h2>
</v-card-text>
</v-card>
<!-- Checkbox Select Tech Pods Teams -->
<v-checkbox
v-for="items in teams4"
:key="items.text"
:label="`${items.text}`"
:value="items.value"
hide-details
v-model="form.CPTechPods"
:rules="TechPodsRules"
required
></v-checkbox>
<v-layout align-center>
<v-checkbox v-model="form.CPTechPods" class="shrink mr-2" label="Other" value="Other8" hide-details></v-checkbox>
<v-text-field hint="Please Specify Other Tech Pods Here"></v-text-field>
</v-layout>
<v-card class="mt-2 mb-4">
<v-card-text>
<h1>Which Teams External to Customer Protection are Needed?</h1>
<h2 style="color: red">Check all that apply</h2>
</v-card-text>
</v-card>
<!-- Checkbox Select External Teams -->
<v-checkbox
v-for="items in teams5"
:key="items.text"
:label="`${items.text}`"
:value="items.value"
hide-details
v-model="form.CPExternalTeams"
:rules="ExternalTeamsRules"
required
></v-checkbox>
<v-layout align-center>
<v-checkbox v-model="form.CPExternalTeams" class="shrink mr-2" label="Other" value="Other9" hide-details></v-checkbox>
<v-text-field hint="Please Specify Other External Teams Here"></v-text-field>
</v-layout>
</v-flex>
</v-layout>
<!-- CP Intake Form End -->
<!-- Begin Submission Summary / Preview -->
<v-layout row style="background: white;">
</v-layout>
<div class="row" style="background-color: #dbdcdf;
border-radius: 15px 15px 15px 15px;
padding: 10px; font-family: 'Roboto';font-size: 12px;">
<div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
<div class="panel panel-default">
<div class="panel-heading" style="text-align:center">
<br />
<h3>Submission Summary / Preview</h3>
<h4 style="color:red">Confirm that your request is correct before submission</h4>
</div>
<div class="panel-body" >
<p>
<strong>CP Strategy and Analysis Teams:
</strong>
</p>
<ul>
<li v-for="(item) in form.CPStrategy" :key="item">
<strong><span style="color:blue;font-size:15px">{{item}}</span></strong>
</li>
</ul>
<hr>
<p>
<strong>CP Product and Ops Teams:
</strong>
</p>
<ul>
<li v-for="(item) in this.form.CPProductOpsTeams" :key="item">
<strong><span style="color:blue;font-size:15px">{{item}}</span></strong>
</li>
</ul>
<hr>
<p>
<strong>CP Tech Pods:
</strong>
</p>
<ul>
<li v-for="(item) in form.CPTechPods" :key="item">
</li>
<li>
<strong><p style="color:blue;font-size:15px">Case Closed Pod</p></strong>
</li>
<li>
<strong><p style="color:blue;font-size:15px">Centamines Pod</p></strong>
</li>
<li>
<strong><p style="color:blue;font-size:15px">Fraud Nemesis Pod</p></strong>
</li>
<li>
<strong><p style="color:blue;font-size:15px">Red Bull Pod</p></strong>
</li>
</ul>
<hr>
<p>
<strong>Teams External to CP:
</strong>
</p>
<ul>
<li v-for="(item) in form.CPExternalTeams" :key="item">
<strong><span style="color:blue;font-size:15px">{{ item }}</span></strong>
</li>
</ul>
<hr>
<br />
</div>
</div>
</div>
</div>
<!-- End Submission Summary / Preview -->
<!-- Begin Footer -->
<br />
<v-toolbar color="#004977">
<v-btn :class='"btn btn-block btn-"+btn'
@mouseover="btn='Everything looks right!'"
@mouseleave="btn='Submit Request'"
:disabled="!valid"
v-on:click.native="addJob">
{{ btn }}
</v-btn>
</v-toolbar>
<!-- End Footer -->
</div>
</div>
</div>
</v-form>
</v-container>
</div>
<v-layout>
<v-flex xs12>
<div v-if="showSpinner" class="spinnerContainer text-xs-center">
<pulse-loader size="20px" height="20px" radius="100%" color="grey"></pulse-loader>
</div>
</v-flex>
</v-layout>
<v-layout v-if="showThanks">
<v-flex xs12 class="xs-text-center">
<div class="thanksContainer">
<p class="title">Thank You!</p>
<p class="subheading">Your request has been submitted.</p>
<br><br>
<p class="subheading">Next Steps:</p>
<p class="subheading">
Your Request will follow either an Adhoc or New Project intake path. Be on the lookout for an invite or message from the CP Rocket Analytics mailbox regarding Requirements Gathering
</p>
</div>
</v-flex>
</v-layout>
</div>
</div>
</template>
<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 },
$_veeValidate: {
validator: 'new'
},
data: () => ({
//Validation variables
allowSpaces: false,
match: 'Foobar',
max: 0,
model: 'Foobar',
btn: 'Submit',
//form input variables inside form object
form: {
RequestorName: '',
RequestorEmail: '',
NameOfRequest: '',
SelectedPrioritizedInitiative: '',
RequestDescription: '',
PrimaryIntentTeam: '',
CPStrategy: [],
CPProductOpsTeams: [],
CPTechPods: [],
CPExternalTeams: [],
BusinessValue: '',
TimeCriticality: '',
RiskReduction: '',
},
// other variables
isSubmitted:false,
impactedTeams: [],
valid: true,
formErrors: false,
showThanks: false,
team3: [
{ id:100022, team_name:"Case Closed Pod"},
{ id:100021, team_name:"Centamines Pod"},
{ id:100020, team_name:"Fraud Nemesis Pod"},
{ id:100023, team_name:"Red Bull Pod"},
],
StrategyAndAnalysisRules: [
v => !!v || 'Strategy and Analysis Selection is Required',
v => (v && v.length > 0) || 'You Must Select A Team'
],
ProductOpsRules: [
v => !!v || 'Product and Ops Selection is Required',
v => (v && v.length > 0) || 'You Must Select A Team'
],
TechPodsRules: [
v => !!v || 'Tech Pods Selection is Required',
v => (v && v.length > 0) || 'You Must Select A Team'
],
ExternalTeamsRules: [
v => !!v || 'External Teams Selection is Required',
v => (v && v.length > 0) || 'You Must Select A Team'
],
items: ['Initiative 1',
'Initiative 2',
'Initiative 3',
'Initiative 4'],
// Variables for initiatives select list
initiatives: [],
selOption: {
text:'',
value:''
},
//Variables for Strategy and Analysis Teams
teams: [],
selOption2: {
text:'',
value:'',
label:''
},
//Variables for Product and Ops Teams
teams3: [],
selOption3: {
text:'',
value:'',
label:''
},
//Variables for Tech Pods
teams4: [],
selOption4: {
text:'',
value:'',
label:''
},
//Variables for External Teams
teams5: [],
selOption5: {
text:'',
value:'',
label:''
},
impactedTeams: [],
formErrors: false,
showSpinner: false,
showThanks: false,
size: "60px",
// mapping names to id's for teams
//CPStrategy and Analysis
team1 : [
{ "id":100015, "team_name":"1st Party Fraud"},
{ "id":100002, "team_name":"3rd Party Fraud"},
{ "id":100004, "team_name":"Data Science"},
{ "id":100005, "team_name":"Debit & ATM"},
{ "id":100006, "team_name":"Fraud Innovation"},
{ "id":100008, "team_name":"Internal Fraud"},
{ "id":100019, "team_name":"Ops Analysis"},
{ "id":100001, "team_name":"Rocket Analytics"},
{ "id":100014, "team_name":"Small Business Bank"},
],
result1 : team1.map((item) => {
return {
name: item.team_name + ' ' + item.id,
};
}),
//CPProduct and ops Teams
team2 : [
{ "id":100017, "team_name":"Customer Protection Resolution"},
{ "id":100018, "team_name":"Investigations & Claims"},
{ "id":100016, "team_name":"Prevention & Recoveries"},
],
result2 : team2.map((item) => {
return {
name: item.team_name + ' ' + item.id,
};
}),
//CPTech Pods
team3 : [
{ id:100022, team_name:"Case Closed Pod"},
{ id:100021, team_name:"Centamines Pod"},
{ id:100020, team_name:"Fraud Nemesis Pod"},
{ id:100023, team_name:"Red Bull Pod"},
],
result3 : team3.map((item) => {
return {
name: item.team_name + ' ' + item.id,
};
}),
//CPExternal Teams
team4 : [
{ "id":100027, "team_name":"Anti-Money Laundering"},
{ "id":100030, "team_name":"Bank Operations"},
{ "id":100029, "team_name":"Bank Ops and Robotics"},
{ "id":100026, "team_name":"Compliance"},
{ "id":100031, "team_name":"CSST"},
{ "id":100033, "team_name":"Human Resources"},
{ "id":100025, "team_name":"Legal"},
{ "id":100032, "team_name":"Market Experience"},
{ "id":100028, "team_name":"PEEP"},
{ "id":100024, "team_name":"Risk"},
],
result4 : team4.map((item) => {
return {
name: item.team_name + ' ' + item.id,
};
})
}),
// for retrieving API team_data below
mounted() {
let that = this
axios.get('https://rocket-tools-dev.cloud.capitalone.com/api/data/fetchCpIntakeData')
.then(function(response){
console.log("DATA", response)
// Retrieve all initiatives that are active
let i = response.data.initiative_data;
i.forEach(function(elt) {
if(elt.is_active=='yes') {
that.initiatives.push(Object.assign({},that.selOption,{
text: elt.initiative_name,
value: elt.initiative_id,
label: elt.initiative_name
}))
}
})
// Retrieve all teams where type = Strategy and Analysis
let j = response.data.team_data;
j.forEach(function(elt){
if(elt.team_type=='Strategy and Analysis') {
that.teams.push(Object.assign({},that.selOption2,{
text: elt.team_name,
value: elt.team_id,
label: elt.team_name
}))
}
})
// Retrieve all teams where type = Product and Ops
let k = response.data.team_data;
k.forEach(function(elt){
if(elt.team_type=='Product and Ops') {
that.teams3.push(Object.assign({},that.selOption3,{
text: elt.team_name,
value: elt.team_id,
label: elt.team_name
}))
}
})
// Retrieve all teams where type = Tech Sprint Team
let l = response.data.team_data;
l.forEach(function(elt){
if(elt.team_type=='Tech Sprint Team') {
that.teams4.push(Object.assign({},that.selOption4,{
text: elt.team_name,
value: elt.team_id,
label: elt.team_name
}))
console.log("elt is: " + elt.team_id);
}
})
// Retrieve all teams where type = External
let o = response.data.team_data;
o.forEach(function(elt){
if(elt.team_type=='External') {
that.teams5.push(Object.assign({},that.selOption5,{
text: elt.team_name,
value: elt.team_id,
label: elt.team_name
}))
}
})
})
},
computed: {
// Begin rules for acceptable input values
rules () {
const rules = []
if (this.max) {
const rule =
v => (v || '').length <= this.max ||
`A maximum of ${this.max} characters is allowed`
rules.push(rule)
}
if (!this.allowSpaces) {
const rule =
v => (v || '').indexOf(' ') < 0 ||
'No spaces are allowed'
rules.push(rule)
}
if (this.match) {
const rule =
v => (!!v && v) === this.match ||
'Values do not match'
rules.push(rule)
}
return rules
}
},
}
</script>
答案 0 :(得分：0)
您可以在数据中包含一个选项obj：
{
1: Little to no risk reduction,
...
}
将收音机选项更改为
<v-radio v-for="(val, k)" :label="`${k}: ${val}`" :value="k"></v-radio>
以您要显示名称的形式：
this.options[form.RiskReduction]
，表单仍将提交ID。
我希望这会有所帮助。