Slots and Dynamic Components
1
$begingroup$
It's an exercise from a Vue.js course I'm enrolled into. The aim is to get comfortable with the Vue.js features Slots and Dynamic components. By clicking on the buttons one shall be able to change the currently selected and rendered component.
With green button clicked:
With the red button clicked:
The four main files with the styling where provided by the instructor. I had to write the JavaScript code.
// -- App.vue ------------------------------------------------------------
<template>
<div class="container">
<div class="row">
<div class="col-xs-12">
<h2>Currently active component: {{ selected }}</h2>
<br>
<button class="btn btn-primary" @click="onClick($event, 'blue')">Load Blue Template</button>
<button class="btn btn-success" @click="onClick($event, 'green')">Load Green Template</button>
<button class="btn btn-danger" @click="onClick($event, 'red')">Load Red Template</button>
<hr>
<component :is="selected">
<h1 slot="blue-headline">Nicht von im verschwand so deiner und weiter. Liebe sonder.</h1>
<p slot="blue-text">Youth weary his high he might, heart a his ever his</p>
<h3 slot="green-headline">Bonan viroj por dum la kun la al mangxu hispanujo</h3>
<p slot="green-text">Tempor sed kasd et rebum dolor ipsum vero ipsum invidunt. Erat est sed dolores gubergren.</p>
<h2 slot="red-headline">Intendo cose vita con</h2>
<p slot="red-text">Bist ich dahinten zurück du der der deiner liebe.</p>
</component>
</div>
</div>
</div>
</template>
<script>
import Blue from './components/Blue.vue';
import Green from './components/Green.vue';
import Red from './components/Red.vue';
export default {
components: {
appBlue: Blue,
appGreen: Green,
appRed: Red
},
data: function() {
return {
selected: "appBlue"
}
},
methods: {
onClick: function(event, selection) {
switch (selection) {
case "blue":
this.selected = "appBlue";
break;
case "green":
this.selected = "appGreen";
break;
case "red":
this.selected = "appRed";
break;
default:
this.selected = "appBlue";
}
}
}
}
</script>
<style>
</style>
// -- Blue.vue -----------------------------------------------------------
<template>
<div>
<slot name="blue-headline"></slot>
<slot name="blue-text"></slot>
</div>
</template>
<script>
</script>
<style scoped>
div {
border: 1px solid blue;
background-color: lightblue;
padding: 30px;
margin: 20px auto;
text-align: center
}
</style>
// -- Green.vue ----------------------------------------------------------
<template>
<div>
<slot name="green-headline"></slot>
<slot name="green-text"></slot>
</div>
</template>
<script>
</script>
<style scoped>
div {
border: 1px solid green;
background-color: lightgreen;
padding: 30px;
margin: 20px auto;
text-align: center
}
</style>
// -- Red.vue ------------------------------------------------------------
<template>
<div>
<slot name="red-headline"></slot>
<slot name="red-text"></slot>
</div>
</template>
<script>
</script>
<style scoped>
div {
border: 1px solid red;
background-color: lightcoral;
padding: 30px;
margin: 20px auto;
text-align: center
}
</style>Full project-directory here on GitHub.
What do you think about my solution? What would you have done differently and why?
javascript vue.js
edited 1 min ago
Jamal♦
30.3k11117227
asked 16 hours ago
michael.zechmichael.zech
1,7281634
$endgroup$
add a comment |
1
$begingroup$
It's an exercise from a Vue.js course I'm enrolled into. The aim is to get comfortable with the Vue.js features Slots and Dynamic components. By clicking on the buttons one shall be able to change the currently selected and rendered component.
With green button clicked:
With the red button clicked:
The four main files with the styling where provided by the instructor. I had to write the JavaScript code.
// -- App.vue ------------------------------------------------------------
<template>
<div class="container">
<div class="row">
<div class="col-xs-12">
<h2>Currently active component: {{ selected }}</h2>
<br>
<button class="btn btn-primary" @click="onClick($event, 'blue')">Load Blue Template</button>
<button class="btn btn-success" @click="onClick($event, 'green')">Load Green Template</button>
<button class="btn btn-danger" @click="onClick($event, 'red')">Load Red Template</button>
<hr>
<component :is="selected">
<h1 slot="blue-headline">Nicht von im verschwand so deiner und weiter. Liebe sonder.</h1>
<p slot="blue-text">Youth weary his high he might, heart a his ever his</p>
<h3 slot="green-headline">Bonan viroj por dum la kun la al mangxu hispanujo</h3>
<p slot="green-text">Tempor sed kasd et rebum dolor ipsum vero ipsum invidunt. Erat est sed dolores gubergren.</p>
<h2 slot="red-headline">Intendo cose vita con</h2>
<p slot="red-text">Bist ich dahinten zurück du der der deiner liebe.</p>
</component>
</div>
</div>
</div>
</template>
<script>
import Blue from './components/Blue.vue';
import Green from './components/Green.vue';
import Red from './components/Red.vue';
export default {
components: {
appBlue: Blue,
appGreen: Green,
appRed: Red
},
data: function() {
return {
selected: "appBlue"
}
},
methods: {
onClick: function(event, selection) {
switch (selection) {
case "blue":
this.selected = "appBlue";
break;
case "green":
this.selected = "appGreen";
break;
case "red":
this.selected = "appRed";
break;
default:
this.selected = "appBlue";
}
}
}
}
</script>
<style>
</style>
// -- Blue.vue -----------------------------------------------------------
<template>
<div>
<slot name="blue-headline"></slot>
<slot name="blue-text"></slot>
</div>
</template>
<script>
</script>
<style scoped>
div {
border: 1px solid blue;
background-color: lightblue;
padding: 30px;
margin: 20px auto;
text-align: center
}
</style>
// -- Green.vue ----------------------------------------------------------
<template>
<div>
<slot name="green-headline"></slot>
<slot name="green-text"></slot>
</div>
</template>
<script>
</script>
<style scoped>
div {
border: 1px solid green;
background-color: lightgreen;
padding: 30px;
margin: 20px auto;
text-align: center
}
</style>
// -- Red.vue ------------------------------------------------------------
<template>
<div>
<slot name="red-headline"></slot>
<slot name="red-text"></slot>
</div>
</template>
<script>
</script>
<style scoped>
div {
border: 1px solid red;
background-color: lightcoral;
padding: 30px;
margin: 20px auto;
text-align: center
}
</style>Full project-directory here on GitHub.
What do you think about my solution? What would you have done differently and why?
javascript vue.js
edited 1 min ago
Jamal♦
30.3k11117227
asked 16 hours ago
michael.zechmichael.zech
1,7281634
$endgroup$
add a comment |
1
1
1
$begingroup$
It's an exercise from a Vue.js course I'm enrolled into. The aim is to get comfortable with the Vue.js features Slots and Dynamic components. By clicking on the buttons one shall be able to change the currently selected and rendered component.
With green button clicked:
With the red button clicked:
The four main files with the styling where provided by the instructor. I had to write the JavaScript code.
// -- App.vue ------------------------------------------------------------
<template>
<div class="container">
<div class="row">
<div class="col-xs-12">
<h2>Currently active component: {{ selected }}</h2>
<br>
<button class="btn btn-primary" @click="onClick($event, 'blue')">Load Blue Template</button>
<button class="btn btn-success" @click="onClick($event, 'green')">Load Green Template</button>
<button class="btn btn-danger" @click="onClick($event, 'red')">Load Red Template</button>
<hr>
<component :is="selected">
<h1 slot="blue-headline">Nicht von im verschwand so deiner und weiter. Liebe sonder.</h1>
<p slot="blue-text">Youth weary his high he might, heart a his ever his</p>
<h3 slot="green-headline">Bonan viroj por dum la kun la al mangxu hispanujo</h3>
<p slot="green-text">Tempor sed kasd et rebum dolor ipsum vero ipsum invidunt. Erat est sed dolores gubergren.</p>
<h2 slot="red-headline">Intendo cose vita con</h2>
<p slot="red-text">Bist ich dahinten zurück du der der deiner liebe.</p>
</component>
</div>
</div>
</div>
</template>
<script>
import Blue from './components/Blue.vue';
import Green from './components/Green.vue';
import Red from './components/Red.vue';
export default {
components: {
appBlue: Blue,
appGreen: Green,
appRed: Red
},
data: function() {
return {
selected: "appBlue"
}
},
methods: {
onClick: function(event, selection) {
switch (selection) {
case "blue":
this.selected = "appBlue";
break;
case "green":
this.selected = "appGreen";
break;
case "red":
this.selected = "appRed";
break;
default:
this.selected = "appBlue";
}
}
}
}
</script>
<style>
</style>
// -- Blue.vue -----------------------------------------------------------
<template>
<div>
<slot name="blue-headline"></slot>
<slot name="blue-text"></slot>
</div>
</template>
<script>
</script>
<style scoped>
div {
border: 1px solid blue;
background-color: lightblue;
padding: 30px;
margin: 20px auto;
text-align: center
}
</style>
// -- Green.vue ----------------------------------------------------------
<template>
<div>
<slot name="green-headline"></slot>
<slot name="green-text"></slot>
</div>
</template>
<script>
</script>
<style scoped>
div {
border: 1px solid green;
background-color: lightgreen;
padding: 30px;
margin: 20px auto;
text-align: center
}
</style>
// -- Red.vue ------------------------------------------------------------
<template>
<div>
<slot name="red-headline"></slot>
<slot name="red-text"></slot>
</div>
</template>
<script>
</script>
<style scoped>
div {
border: 1px solid red;
background-color: lightcoral;
padding: 30px;
margin: 20px auto;
text-align: center
}
</style>Full project-directory here on GitHub.
What do you think about my solution? What would you have done differently and why?
javascript vue.js
edited 1 min ago
Jamal♦
30.3k11117227
asked 16 hours ago
michael.zechmichael.zech
1,7281634
$endgroup$
It's an exercise from a Vue.js course I'm enrolled into. The aim is to get comfortable with the Vue.js features Slots and Dynamic components. By clicking on the buttons one shall be able to change the currently selected and rendered component.
With green button clicked:
With the red button clicked:
The four main files with the styling where provided by the instructor. I had to write the JavaScript code.
// -- App.vue ------------------------------------------------------------
<template>
<div class="container">
<div class="row">
<div class="col-xs-12">
<h2>Currently active component: {{ selected }}</h2>
<br>
<button class="btn btn-primary" @click="onClick($event, 'blue')">Load Blue Template</button>
<button class="btn btn-success" @click="onClick($event, 'green')">Load Green Template</button>
<button class="btn btn-danger" @click="onClick($event, 'red')">Load Red Template</button>
<hr>
<component :is="selected">
<h1 slot="blue-headline">Nicht von im verschwand so deiner und weiter. Liebe sonder.</h1>
<p slot="blue-text">Youth weary his high he might, heart a his ever his</p>
<h3 slot="green-headline">Bonan viroj por dum la kun la al mangxu hispanujo</h3>
<p slot="green-text">Tempor sed kasd et rebum dolor ipsum vero ipsum invidunt. Erat est sed dolores gubergren.</p>
<h2 slot="red-headline">Intendo cose vita con</h2>
<p slot="red-text">Bist ich dahinten zurück du der der deiner liebe.</p>
</component>
</div>
</div>
</div>
</template>
<script>
import Blue from './components/Blue.vue';
import Green from './components/Green.vue';
import Red from './components/Red.vue';
export default {
components: {
appBlue: Blue,
appGreen: Green,
appRed: Red
},
data: function() {
return {
selected: "appBlue"
}
},
methods: {
onClick: function(event, selection) {
switch (selection) {
case "blue":
this.selected = "appBlue";
break;
case "green":
this.selected = "appGreen";
break;
case "red":
this.selected = "appRed";
break;
default:
this.selected = "appBlue";
}
}
}
}
</script>
<style>
</style>
// -- Blue.vue -----------------------------------------------------------
<template>
<div>
<slot name="blue-headline"></slot>
<slot name="blue-text"></slot>
</div>
</template>
<script>
</script>
<style scoped>
div {
border: 1px solid blue;
background-color: lightblue;
padding: 30px;
margin: 20px auto;
text-align: center
}
</style>
// -- Green.vue ----------------------------------------------------------
<template>
<div>
<slot name="green-headline"></slot>
<slot name="green-text"></slot>
</div>
</template>
<script>
</script>
<style scoped>
div {
border: 1px solid green;
background-color: lightgreen;
padding: 30px;
margin: 20px auto;
text-align: center
}
</style>
// -- Red.vue ------------------------------------------------------------
<template>
<div>
<slot name="red-headline"></slot>
<slot name="red-text"></slot>
</div>
</template>
<script>
</script>
<style scoped>
div {
border: 1px solid red;
background-color: lightcoral;
padding: 30px;
margin: 20px auto;
text-align: center
}
</style>Full project-directory here on GitHub.
What do you think about my solution? What would you have done differently and why?
// -- App.vue ------------------------------------------------------------
<template>
<div class="container">
<div class="row">
<div class="col-xs-12">
<h2>Currently active component: {{ selected }}</h2>
<br>
<button class="btn btn-primary" @click="onClick($event, 'blue')">Load Blue Template</button>
<button class="btn btn-success" @click="onClick($event, 'green')">Load Green Template</button>
<button class="btn btn-danger" @click="onClick($event, 'red')">Load Red Template</button>
<hr>
<component :is="selected">
<h1 slot="blue-headline">Nicht von im verschwand so deiner und weiter. Liebe sonder.</h1>
<p slot="blue-text">Youth weary his high he might, heart a his ever his</p>
<h3 slot="green-headline">Bonan viroj por dum la kun la al mangxu hispanujo</h3>
<p slot="green-text">Tempor sed kasd et rebum dolor ipsum vero ipsum invidunt. Erat est sed dolores gubergren.</p>
<h2 slot="red-headline">Intendo cose vita con</h2>
<p slot="red-text">Bist ich dahinten zurück du der der deiner liebe.</p>
</component>
</div>
</div>
</div>
</template>
<script>
import Blue from './components/Blue.vue';
import Green from './components/Green.vue';
import Red from './components/Red.vue';
export default {
components: {
appBlue: Blue,
appGreen: Green,
appRed: Red
},
data: function() {
return {
selected: "appBlue"
}
},
methods: {
onClick: function(event, selection) {
switch (selection) {
case "blue":
this.selected = "appBlue";
break;
case "green":
this.selected = "appGreen";
break;
case "red":
this.selected = "appRed";
break;
default:
this.selected = "appBlue";
}
}
}
}
</script>
<style>
</style>
// -- Blue.vue -----------------------------------------------------------
<template>
<div>
<slot name="blue-headline"></slot>
<slot name="blue-text"></slot>
</div>
</template>
<script>
</script>
<style scoped>
div {
border: 1px solid blue;
background-color: lightblue;
padding: 30px;
margin: 20px auto;
text-align: center
}
</style>
// -- Green.vue ----------------------------------------------------------
<template>
<div>
<slot name="green-headline"></slot>
<slot name="green-text"></slot>
</div>
</template>
<script>
</script>
<style scoped>
div {
border: 1px solid green;
background-color: lightgreen;
padding: 30px;
margin: 20px auto;
text-align: center
}
</style>
// -- Red.vue ------------------------------------------------------------
<template>
<div>
<slot name="red-headline"></slot>
<slot name="red-text"></slot>
</div>
</template>
<script>
</script>
<style scoped>
div {
border: 1px solid red;
background-color: lightcoral;
padding: 30px;
margin: 20px auto;
text-align: center
}
</style>// -- App.vue ------------------------------------------------------------
<template>
<div class="container">
<div class="row">
<div class="col-xs-12">
<h2>Currently active component: {{ selected }}</h2>
<br>
<button class="btn btn-primary" @click="onClick($event, 'blue')">Load Blue Template</button>
<button class="btn btn-success" @click="onClick($event, 'green')">Load Green Template</button>
<button class="btn btn-danger" @click="onClick($event, 'red')">Load Red Template</button>
<hr>
<component :is="selected">
<h1 slot="blue-headline">Nicht von im verschwand so deiner und weiter. Liebe sonder.</h1>
<p slot="blue-text">Youth weary his high he might, heart a his ever his</p>
<h3 slot="green-headline">Bonan viroj por dum la kun la al mangxu hispanujo</h3>
<p slot="green-text">Tempor sed kasd et rebum dolor ipsum vero ipsum invidunt. Erat est sed dolores gubergren.</p>
<h2 slot="red-headline">Intendo cose vita con</h2>
<p slot="red-text">Bist ich dahinten zurück du der der deiner liebe.</p>
</component>
</div>
</div>
</div>
</template>
<script>
import Blue from './components/Blue.vue';
import Green from './components/Green.vue';
import Red from './components/Red.vue';
export default {
components: {
appBlue: Blue,
appGreen: Green,
appRed: Red
},
data: function() {
return {
selected: "appBlue"
}
},
methods: {
onClick: function(event, selection) {
switch (selection) {
case "blue":
this.selected = "appBlue";
break;
case "green":
this.selected = "appGreen";
break;
case "red":
this.selected = "appRed";
break;
default:
this.selected = "appBlue";
}
}
}
}
</script>
<style>
</style>
// -- Blue.vue -----------------------------------------------------------
<template>
<div>
<slot name="blue-headline"></slot>
<slot name="blue-text"></slot>
</div>
</template>
<script>
</script>
<style scoped>
div {
border: 1px solid blue;
background-color: lightblue;
padding: 30px;
margin: 20px auto;
text-align: center
}
</style>
// -- Green.vue ----------------------------------------------------------
<template>
<div>
<slot name="green-headline"></slot>
<slot name="green-text"></slot>
</div>
</template>
<script>
</script>
<style scoped>
div {
border: 1px solid green;
background-color: lightgreen;
padding: 30px;
margin: 20px auto;
text-align: center
}
</style>
// -- Red.vue ------------------------------------------------------------
<template>
<div>
<slot name="red-headline"></slot>
<slot name="red-text"></slot>
</div>
</template>
<script>
</script>
<style scoped>
div {
border: 1px solid red;
background-color: lightcoral;
padding: 30px;
margin: 20px auto;
text-align: center
}
</style>javascript vue.js
javascript vue.js
edited 1 min ago
Jamal♦
30.3k11117227
asked 16 hours ago
michael.zechmichael.zech
1,7281634
edited 1 min ago
Jamal♦
30.3k11117227
asked 16 hours ago
michael.zechmichael.zech
1,7281634
edited 1 min ago
Jamal♦
30.3k11117227
edited 1 min ago
Jamal♦
30.3k11117227
edited 1 min ago
Jamal♦
30.3k11117227
30.3k11117227
asked 16 hours ago
michael.zechmichael.zech
1,7281634
asked 16 hours ago
michael.zechmichael.zech
1,7281634
asked 16 hours ago
michael.zechmichael.zech
1,7281634
1,7281634
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
2
$begingroup$
Your code is overall very neat and clean and easily readable, I think you're ready for the next level!
This switch maps from one string to another:
switch (selection) {
case "blue":
this.selected = "appBlue";
break;
case "green":
this.selected = "appGreen";
break;
case "red":
this.selected = "appRed";
break;
default:
this.selected = "appBlue";
}
This could either be changed into using a lookup dictionary:
let mappedComponents = { red: "appRed", blue: "appBlue", green: "appGreen" };
this.selected = mappedComponents[selection];
Or you could just skip that remapping and change the names of the components so that they directly match the selection value:
components: {
blue: Blue,
green: Green,
red: Red
},
this.selected = selection;
Other notes that might not have been in your control for the assignment:
- The CSS is duplicated. You could extract
padding,marginandtext-alignto a separate CSS class. - I would recommend having just one component for all three different colors and use a property to inject its colors.
answered 16 hours ago
Simon Forsberg♦Simon Forsberg
48.6k7130286
$endgroup$
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
return StackExchange.using("mathjaxEditing", function () {
StackExchange.MarkdownEditor.creationCallbacks.add(function (editor, postfix) {
StackExchange.mathjaxEditing.prepareWmdForMathJax(editor, postfix, [["\$", "\$"]]);
});
});
}, "mathjax-editing");
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "196"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f213190%2fslots-and-dynamic-components%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
$begingroup$
Your code is overall very neat and clean and easily readable, I think you're ready for the next level!
This switch maps from one string to another:
switch (selection) {
case "blue":
this.selected = "appBlue";
break;
case "green":
this.selected = "appGreen";
break;
case "red":
this.selected = "appRed";
break;
default:
this.selected = "appBlue";
}
This could either be changed into using a lookup dictionary:
let mappedComponents = { red: "appRed", blue: "appBlue", green: "appGreen" };
this.selected = mappedComponents[selection];
Or you could just skip that remapping and change the names of the components so that they directly match the selection value:
components: {
blue: Blue,
green: Green,
red: Red
},
this.selected = selection;
Other notes that might not have been in your control for the assignment:
- The CSS is duplicated. You could extract
padding,marginandtext-alignto a separate CSS class. - I would recommend having just one component for all three different colors and use a property to inject its colors.
answered 16 hours ago
Simon Forsberg♦Simon Forsberg
48.6k7130286
$endgroup$
add a comment |
2
$begingroup$
Your code is overall very neat and clean and easily readable, I think you're ready for the next level!
This switch maps from one string to another:
switch (selection) {
case "blue":
this.selected = "appBlue";
break;
case "green":
this.selected = "appGreen";
break;
case "red":
this.selected = "appRed";
break;
default:
this.selected = "appBlue";
}
This could either be changed into using a lookup dictionary:
let mappedComponents = { red: "appRed", blue: "appBlue", green: "appGreen" };
this.selected = mappedComponents[selection];
Or you could just skip that remapping and change the names of the components so that they directly match the selection value:
components: {
blue: Blue,
green: Green,
red: Red
},
this.selected = selection;
Other notes that might not have been in your control for the assignment:
- The CSS is duplicated. You could extract
padding,marginandtext-alignto a separate CSS class. - I would recommend having just one component for all three different colors and use a property to inject its colors.
answered 16 hours ago
Simon Forsberg♦Simon Forsberg
48.6k7130286
$endgroup$
add a comment |
2
2
2
$begingroup$
Your code is overall very neat and clean and easily readable, I think you're ready for the next level!
This switch maps from one string to another:
switch (selection) {
case "blue":
this.selected = "appBlue";
break;
case "green":
this.selected = "appGreen";
break;
case "red":
this.selected = "appRed";
break;
default:
this.selected = "appBlue";
}
This could either be changed into using a lookup dictionary:
let mappedComponents = { red: "appRed", blue: "appBlue", green: "appGreen" };
this.selected = mappedComponents[selection];
Or you could just skip that remapping and change the names of the components so that they directly match the selection value:
components: {
blue: Blue,
green: Green,
red: Red
},
this.selected = selection;
Other notes that might not have been in your control for the assignment:
- The CSS is duplicated. You could extract
padding,marginandtext-alignto a separate CSS class. - I would recommend having just one component for all three different colors and use a property to inject its colors.
answered 16 hours ago
Simon Forsberg♦Simon Forsberg
48.6k7130286
$endgroup$
Your code is overall very neat and clean and easily readable, I think you're ready for the next level!
This switch maps from one string to another:
switch (selection) {
case "blue":
this.selected = "appBlue";
break;
case "green":
this.selected = "appGreen";
break;
case "red":
this.selected = "appRed";
break;
default:
this.selected = "appBlue";
}
This could either be changed into using a lookup dictionary:
let mappedComponents = { red: "appRed", blue: "appBlue", green: "appGreen" };
this.selected = mappedComponents[selection];
Or you could just skip that remapping and change the names of the components so that they directly match the selection value:
components: {
blue: Blue,
green: Green,
red: Red
},
this.selected = selection;
Other notes that might not have been in your control for the assignment:
- The CSS is duplicated. You could extract
padding,marginandtext-alignto a separate CSS class. - I would recommend having just one component for all three different colors and use a property to inject its colors.
answered 16 hours ago
Simon Forsberg♦Simon Forsberg
48.6k7130286
answered 16 hours ago
Simon Forsberg♦Simon Forsberg
48.6k7130286
answered 16 hours ago
Simon Forsberg♦Simon Forsberg
48.6k7130286
answered 16 hours ago
Simon Forsberg♦Simon Forsberg
48.6k7130286
48.6k7130286
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Code Review Stack Exchange!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
Use MathJax to format equations. MathJax reference.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f213190%2fslots-and-dynamic-components%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
