Vuejs dynamic data names - vue.js

Question

Is there a way to dynamically change data names based on other data names? Here is my example.
Say I have these data elements.
export default {
data: function() {
return {
speed: "Standard",
speed_enabled: false,
flex_enabled: false,
};
},
While the user interacts with the front end, I pull in additional speed data, in the form of different names. ex. Priority, Expedited etc.
When I do this I want to change the names of the other data elements. Something like this:
export default {
data: function() {
return {
speed: "Standard",
{{this.speed}}_speed_enabled: false,
flex_enabled: false,
};
},
Something along those lines.. so speed_enabled becomes expedited_speed_enabled and priority_speed_enabled etc. etc.
Is this possible?
EDIT: here is all my code.. maybe someone can figure out how to pass different data to the same component.
Here is my parent component speeds.vue:
<template>
<v-app>
<v-container fill-height>
<v-layout row wrap align-center>
<v-flex xs8 class="mx-auto">
<h1 class="display-1 mont bold fix-title-height pb-3">FBA Shipping Settings</h1>
<v-tabs icons-and-text centered color="purple darken-3" dark class="elevation-12">
<v-tabs-slider color="green lighten-1"></v-tabs-slider>
<v-tab :key="speed" #click="setStandard">
Standard
</v-tab>
<v-tab :key="speed" #click="setExpedited">
Expedited
</v-tab>
<v-tab :key="speed" #click="setPriority">
Priority
</v-tab>
<v-tab-item :key="standard" >
<speed_details></speed_details>
</v-tab-item>
<v-tab-item :key="expedited">
<speed_details></speed_details>
</v-tab-item>
<v-tab-item :key="priority">
<speed_details></speed_details>
</v-tab-item>
</v-tabs>
</v-flex>
</v-layout>
</v-container>
</v-app>
</template>
<script>
import speed_details from '../components/speed_details.vue';
import {dataShare} from '../packs/application.js';
import axios from 'axios';
export default {
data: function() {
return {
speed: "Standard"
};
},
components: {
speed_details
},
created() {
console.log("this should get hit at the beginning and what's speed? " + this.speed);
dataShare.$emit('speed', this.speed);
},
methods: {
getSpeedInfo() {
axios.get('https://bc-ship-trimakas.c9users.io/return_speed_info', {params: {speed: this.speed}}).then(response => {
const speed_info = {
speed_enabled: true,
fixed_rate_amount: response.data.fixed_amount,
// this.fixed_enabled = response.data.fixed;
// this.flex_enabled = response.data.flex;
// this.flex_above_or_below_amount = response.data.flex_amount;
// this.percent_or_dollar = response.data.flex_dollar_or_percent;
free_enabled: response.data.free,
free_shipping_amount: response.data.free_shipping_amount
};
dataShare.$emit('speed_info', speed_info);
});
},
setStandard() {
this.speed = "Standard";
dataShare.$emit('speed', this.speed);
},
setExpedited() {
this.speed = "Expedited";
dataShare.$emit('speed', this.speed);
},
setPriority() {
this.speed = "Priority";
dataShare.$emit('speed', this.speed);
},
}
};
</script>
<style>
</style>
And then my child component speed_details.vue that is the same across all three tabs:
<template>
<v-card flat class="lightblue" :resize="moveIcon">
<v-form ref="form" v-model="valid" lazy-validation>
<v-layout row wrap>
<v-flex xs7>
<v-switch
:label="'Enable ' + speed + ' Shipping'"
:v-model="speed_enabled"
color="purple darken-3"
#change="enableAndDisable"
></v-switch>
</v-flex>
</v-layout>
<v-layout row wrap>
<v-flex xs7>
<v-switch
label="Enable Flex Rate Shipping?"
:disabled="flex_switch_disabled"
v-model="flex_enabled"
color="purple darken-3"
#change="killFixed, removeFlexAmount"
></v-switch>
</v-flex>
<v-flex>
<v-tooltip top>
<v-icon slot="activator" color="purple darken-3" class="fix_icon">info</v-icon>
<span class="body-2">You can enable fixed or flex rate shipping but not both</span>
</v-tooltip>
</v-flex>
</v-layout>
<v-layout row wrap class="move-up">
<v-flex xs1>
<v-select
:disabled="!flex_enabled"
append-icon=""
color="purple darken-3"
:items="fee_type"
v-model="percent_or_dollar"
label="$ or %"
single-line
auto
hide-details
></v-select>
</v-flex>
<v-flex xs8>
<v-text-field
:disabled="!flex_enabled"
type="number"
color="purple darken-3"
label="Shipping Amount Above or Below FBA Fees"
v-model="flex_above_or_below_amount"
class="push-right"
></v-text-field>
</v-flex>
<v-flex xs1 v-bind="icon_adjust" class="push_down">
<v-tooltip top>
<v-icon slot="activator" color="purple darken-3" class="fix_icon">info</v-icon>
<span class="body-2">This amount will either increase or decrease(-) the fulfillment amount from Amazon.
</span>
</v-tooltip>
</v-flex>
</v-layout>
<v-layout row wrap>
<v-flex xs7>
<v-switch
label="Enable Fixed Rate Shipping?"
:disabled="fixed_switch_disabled"
v-model="fixed_enabled"
color="purple darken-3"
#change="killFlex, removeFixedAmount"
></v-switch>
</v-flex>
<v-flex xs1>
<v-tooltip top>
<v-icon slot="activator" color="purple darken-3" class="fix_icon_less">info</v-icon>
<span class="body-2">This amount will be displayed to your customer and Amazon fees will be ignored.
</span>
</v-tooltip>
</v-flex>
</v-layout>
<v-layout row wrap>
<v-flex xs4>
<v-text-field
:disabled="!fixed_enabled"
type="number"
color="purple darken-3"
label="Fixed Rate Amount"
v-model="fixed_rate_amount"
prefix="$"
class="move-up"
></v-text-field>
</v-flex>
</v-layout>
<v-layout row wrap>
<v-flex xs7>
<v-switch label="Enable Free Shipping?" :disabled="!speed_enabled" v-model="free_enabled" color="purple darken-3"></v-switch>
</v-flex>
</v-layout>
<v-layout row wrap>
<v-flex xs8>
<v-text-field
:disabled="!free_enabled"
type="number"
color="purple darken-3"
label="Order Amount to Qualify for Free Shipping"
v-model="free_shipping_amount"
class="move-up"
prefix="$"
#change="removeFreeAmount"
></v-text-field>
</v-flex>
</v-layout>
<v-layout row wrap>
<v-flex xs11>
<v-btn
medium
dark
:disabled="!speed_enabled"
color="green lighten-1"
#click="sendShipping()"
>Save {{ speed }} Settings</v-btn>
<v-btn
medium
outline
:disabled="!speed_enabled"
color="purple darken-3"
#click="deleteShipping"
>Delete {{ speed }} Settings</v-btn>
</v-flex>
</v-layout>
</v-form>
</v-card>
</template>
<script>
import {dataShare} from '../packs/application.js';
import axios from 'axios';
export default {
data: function() {
return {
speed: "Standard",
icon_adjust: {'offset-xs1': false},
icon_push_right: {'push-right': false},
// [`${this.speed}_speed_enabled`]: false,
speed_enabled: false,
flex_enabled: false,
fixed_enabled: false,
free_enabled: false,
flex_switch_disabled: true,
fixed_switch_disabled: true,
fixed_rate_amount: "",
free_shipping_amount: "",
flex_above_or_below_amount: "",
valid: true,
percent_or_dollar: "",
fee_type: ["$", "%"]
};
},
created() {
dataShare.$on('speed', (speed) => {
this.speed = speed;
});
axios.get('https://bc-ship-trimakas.c9users.io/return_speed_info', {params: {speed: this.speed}}).then(response => {
// this.speed = response.data.shipping_speed;
this.speed_enabled = true;
// this.[`${this.speed}_speed_enabled`] = true;
this.fixed_rate_amount = response.data.fixed_amount;
this.fixed_enabled = response.data.fixed;
this.flex_enabled = response.data.flex;
this.flex_above_or_below_amount = response.data.flex_amount;
this.percent_or_dollar = response.data.flex_dollar_or_percent;
this.free_enabled = response.data.free;
this.free_shipping_amount = response.data.free_shipping_amount;
});
},
computed: {
removeFlexAmount(){
if(this.flex_enabled == false){
this.flex_above_or_below_amount = "";
this.percent_or_dollar = "";
}
},
removeFixedAmount(){
if(this.fixed_enabled == false){
this.fixed_rate_amount = "";
}
},
removeFreeAmount(){
if(this.free_enabled == false){
this.free_shipping_amount = "";
}
},
pushIconRight() {
if(this.$vuetify.breakpoint.mdAndDown){
this.icon_push_right['push-right'] = true;
}
else{
this.icon_push_right['push-right'] = false;
}
},
moveIcon() {
console.log(this.$vuetify.breakpoint.name);
if(this.$vuetify.breakpoint.mdAndDown){
this.icon_adjust['offset-xs1'] = true;
}
else{
this.icon_adjust['offset-xs1'] = false;
}
},
enableAndDisable(){
if(this.speed_enabled == true){
this.flex_switch_disabled = false;
this.fixed_switch_disabled = false;
}
else{
this.flex_switch_disabled = true;
this.fixed_switch_disabled = true;
}
},
killFixed(){
if(this.flex_enabled == true){
this.fixed_switch_disabled = true;
this.fixed_rate_amount = "";
}
if(this.speed_enabled == true && this.flex_enabled == true){
this.fixed_switch_disabled = true;
this.fixed_enabled = false;
this.fixed_rate_amount = "";
}
if(this.speed_enabled == true && this.flex_enabled == false){
this.fixed_switch_disabled = false;
}
},
killFlex(){
if(this.fixed_enabled == true){
this.flex_switch_disabled = true;
this.above_or_below_amount = "";
}
if(this.speed_enabled == true && this.fixed_enabled == true){
this.flex_switch_disabled = true;
this.flex_enabled = false;
this.above_or_below_amount = "";
this.percent_or_dollar = "";
}
if(this.speed_enabled == true && this.fixed_enabled == false){
this.flex_switch_disabled = false;
}
}
},
methods: {
sendShipping() {
const shipping = {
speed_type: this.speed,
speed_enabled: this.speed_enabled,
flex_enabled: this.flex_enabled,
fixed_enabled: this.fixed_enabled,
free_enabled: this.free_enabled,
fixed_rate_amount: this.fixed_rate_amount,
free_shipping_amount: this.free_shipping_amount,
standard_flex_above_or_below_amount: this.above_or_below_amount,
percent_or_dollar: this.percent_or_dollar
};
let self = this;
let speed_info = {bytestand_rate_info: shipping};
axios.post('https://bc-ship-trimakas.c9users.io/save_shipping_info', speed_info).then(response => {
console.log(this.response);
});
},
deleteShipping() {
const deleteSpeed = {
speed_type: this.speed
};
let self = this;
let delete_speed = {bytestand_rate_info: deleteSpeed};
axios.post('https://bc-ship-trimakas.c9users.io/delete_speed', delete_speed).then(response => {
console.log(this.response);
});
}
}
};
</script>
<style>
.push_down {
margin-top: 18px;
}
.fix_icon_less {
margin-top: 5px;
margin-left: -70px;
}
.fix_icon {
margin-top: 5px;
margin-left: -80px;
}
.move-up {
margin-top: -18px;
}
.move-left {
margin-left: -20px;
}
.push-right {
margin-left: 10px;
}
</style>