Multidimensional Array in VueJS
0
Creating an array with VueJS from a form input, processing and displaying a history of each processed input. It's a toaster processing different types of bread with different results. Here are the requirements:
Make a toaster in OOP. It should be able to toast sourdough, wheat, and rye,
but it should reject white and English muffins. Also, it should never burn rye, but should have a random chance to burn sourdough and wheat.
Build a page to display in real time the results of each toaster use,
including a historical log of past usage (show 10+ random results). This
should be written in VueJS
It's not working. Please see my codepen VueJS Toaster Codepen
<script type="text/javascript">
//VueJS Toaster
new Vue({
el: 'app',
data: {
breadslices: data,
breadtype: '',
toaststatus: ''
},
methods: {
toastSlice: function() {
console.log(this.breadtype);
if (this.breadtype == '') {
alert("Enter rye, wheat, white, english muffin, or sour dough");
return;
}
var toast = {
breadtype: this.breadtype,
toaststatus: this.toaststatus
};
if (this.breadtype === "english muffin" || this.breadtype === "white") {
this.toaststatus = "rejected";
}
if (this.breadtype === "rye") {
this.toaststatus = "toasted";
} else if (this.breadtype === "sour dough" || this.breadtype === "wheat") {
//Random Boolean >=.5 Burnt
var randomburnt = Math.random() >= 0.5;
if (randomburnt >= 0.5) {
this.toaststatus = "burnt";
} else {
this.toaststatus = "toasted";
}
}
this.breadslices.push(toast);
this.breadtype = '';
this.toaststatus= '';
alert("The " + this.breadtype + " slice was " + this.toaststatus);
this.breadtype = " ";
this.toaststatus = " ";
}
}
});
</script>
<div id="app">
<div class="container">
<div class="toaster-slot-top">
<input type=text v-model="breadtype" placeholder="ENTER (rye, wheat,
white, english muffin or sour dough)">
</div>
<button type="submit" v-on:click="toastSlice">TOAST</button>
<div class="title">
<h1>TOASTER</h1>
</div>
<div class="toaster-history">
<h2>TOASTER HISTORY</h2>
<div>
<ul>
<li v-for="(toast, index) in breadslices">
{{toast.breadtype}} slice was {{toast.toaststatus}}
</li>
</ul>
</div>
</div>
</div>
</div>
arrays vue.js
edited Nov 20 '18 at 2:25
Cœur
18k9108147
asked Aug 13 '18 at 5:51
Brenda EichelbergerBrenda Eichelberger
32
add a comment |
0
Creating an array with VueJS from a form input, processing and displaying a history of each processed input. It's a toaster processing different types of bread with different results. Here are the requirements:
Make a toaster in OOP. It should be able to toast sourdough, wheat, and rye,
but it should reject white and English muffins. Also, it should never burn rye, but should have a random chance to burn sourdough and wheat.
Build a page to display in real time the results of each toaster use,
including a historical log of past usage (show 10+ random results). This
should be written in VueJS
It's not working. Please see my codepen VueJS Toaster Codepen
<script type="text/javascript">
//VueJS Toaster
new Vue({
el: 'app',
data: {
breadslices: data,
breadtype: '',
toaststatus: ''
},
methods: {
toastSlice: function() {
console.log(this.breadtype);
if (this.breadtype == '') {
alert("Enter rye, wheat, white, english muffin, or sour dough");
return;
}
var toast = {
breadtype: this.breadtype,
toaststatus: this.toaststatus
};
if (this.breadtype === "english muffin" || this.breadtype === "white") {
this.toaststatus = "rejected";
}
if (this.breadtype === "rye") {
this.toaststatus = "toasted";
} else if (this.breadtype === "sour dough" || this.breadtype === "wheat") {
//Random Boolean >=.5 Burnt
var randomburnt = Math.random() >= 0.5;
if (randomburnt >= 0.5) {
this.toaststatus = "burnt";
} else {
this.toaststatus = "toasted";
}
}
this.breadslices.push(toast);
this.breadtype = '';
this.toaststatus= '';
alert("The " + this.breadtype + " slice was " + this.toaststatus);
this.breadtype = " ";
this.toaststatus = " ";
}
}
});
</script>
<div id="app">
<div class="container">
<div class="toaster-slot-top">
<input type=text v-model="breadtype" placeholder="ENTER (rye, wheat,
white, english muffin or sour dough)">
</div>
<button type="submit" v-on:click="toastSlice">TOAST</button>
<div class="title">
<h1>TOASTER</h1>
</div>
<div class="toaster-history">
<h2>TOASTER HISTORY</h2>
<div>
<ul>
<li v-for="(toast, index) in breadslices">
{{toast.breadtype}} slice was {{toast.toaststatus}}
</li>
</ul>
</div>
</div>
</div>
</div>
arrays vue.js
edited Nov 20 '18 at 2:25
Cœur
18k9108147
asked Aug 13 '18 at 5:51
Brenda EichelbergerBrenda Eichelberger
32
1
Welcome to Stack Overflow! Please edit your question to clarify the part of your code you are having trouble with. Currently it is not clear what your question is. Questions without a clear problem statement are not useful to other readers. See: How to create a Minimal, Complete, and Verifiable example.
– girlvsdata
Aug 13 '18 at 6:01
Can you replace this line: if (this.breadtype == '') with if (this.breadtype == ='') and <li v-for="(toast, index) in breadslices"> with <li v-for="let (index, toast) of breadslices"> if it helps ill post it as solution, thanks.
– josip
Aug 13 '18 at 7:41
add a comment |
0
0
0
Creating an array with VueJS from a form input, processing and displaying a history of each processed input. It's a toaster processing different types of bread with different results. Here are the requirements:
Make a toaster in OOP. It should be able to toast sourdough, wheat, and rye,
but it should reject white and English muffins. Also, it should never burn rye, but should have a random chance to burn sourdough and wheat.
Build a page to display in real time the results of each toaster use,
including a historical log of past usage (show 10+ random results). This
should be written in VueJS
It's not working. Please see my codepen VueJS Toaster Codepen
<script type="text/javascript">
//VueJS Toaster
new Vue({
el: 'app',
data: {
breadslices: data,
breadtype: '',
toaststatus: ''
},
methods: {
toastSlice: function() {
console.log(this.breadtype);
if (this.breadtype == '') {
alert("Enter rye, wheat, white, english muffin, or sour dough");
return;
}
var toast = {
breadtype: this.breadtype,
toaststatus: this.toaststatus
};
if (this.breadtype === "english muffin" || this.breadtype === "white") {
this.toaststatus = "rejected";
}
if (this.breadtype === "rye") {
this.toaststatus = "toasted";
} else if (this.breadtype === "sour dough" || this.breadtype === "wheat") {
//Random Boolean >=.5 Burnt
var randomburnt = Math.random() >= 0.5;
if (randomburnt >= 0.5) {
this.toaststatus = "burnt";
} else {
this.toaststatus = "toasted";
}
}
this.breadslices.push(toast);
this.breadtype = '';
this.toaststatus= '';
alert("The " + this.breadtype + " slice was " + this.toaststatus);
this.breadtype = " ";
this.toaststatus = " ";
}
}
});
</script>
<div id="app">
<div class="container">
<div class="toaster-slot-top">
<input type=text v-model="breadtype" placeholder="ENTER (rye, wheat,
white, english muffin or sour dough)">
</div>
<button type="submit" v-on:click="toastSlice">TOAST</button>
<div class="title">
<h1>TOASTER</h1>
</div>
<div class="toaster-history">
<h2>TOASTER HISTORY</h2>
<div>
<ul>
<li v-for="(toast, index) in breadslices">
{{toast.breadtype}} slice was {{toast.toaststatus}}
</li>
</ul>
</div>
</div>
</div>
</div>
arrays vue.js
edited Nov 20 '18 at 2:25
Cœur
18k9108147
asked Aug 13 '18 at 5:51
Brenda EichelbergerBrenda Eichelberger
32
Creating an array with VueJS from a form input, processing and displaying a history of each processed input. It's a toaster processing different types of bread with different results. Here are the requirements:
Make a toaster in OOP. It should be able to toast sourdough, wheat, and rye,
but it should reject white and English muffins. Also, it should never burn rye, but should have a random chance to burn sourdough and wheat.
Build a page to display in real time the results of each toaster use,
including a historical log of past usage (show 10+ random results). This
should be written in VueJS
It's not working. Please see my codepen VueJS Toaster Codepen
<script type="text/javascript">
//VueJS Toaster
new Vue({
el: 'app',
data: {
breadslices: data,
breadtype: '',
toaststatus: ''
},
methods: {
toastSlice: function() {
console.log(this.breadtype);
if (this.breadtype == '') {
alert("Enter rye, wheat, white, english muffin, or sour dough");
return;
}
var toast = {
breadtype: this.breadtype,
toaststatus: this.toaststatus
};
if (this.breadtype === "english muffin" || this.breadtype === "white") {
this.toaststatus = "rejected";
}
if (this.breadtype === "rye") {
this.toaststatus = "toasted";
} else if (this.breadtype === "sour dough" || this.breadtype === "wheat") {
//Random Boolean >=.5 Burnt
var randomburnt = Math.random() >= 0.5;
if (randomburnt >= 0.5) {
this.toaststatus = "burnt";
} else {
this.toaststatus = "toasted";
}
}
this.breadslices.push(toast);
this.breadtype = '';
this.toaststatus= '';
alert("The " + this.breadtype + " slice was " + this.toaststatus);
this.breadtype = " ";
this.toaststatus = " ";
}
}
});
</script>
<div id="app">
<div class="container">
<div class="toaster-slot-top">
<input type=text v-model="breadtype" placeholder="ENTER (rye, wheat,
white, english muffin or sour dough)">
</div>
<button type="submit" v-on:click="toastSlice">TOAST</button>
<div class="title">
<h1>TOASTER</h1>
</div>
<div class="toaster-history">
<h2>TOASTER HISTORY</h2>
<div>
<ul>
<li v-for="(toast, index) in breadslices">
{{toast.breadtype}} slice was {{toast.toaststatus}}
</li>
</ul>
</div>
</div>
</div>
</div>
arrays vue.js
arrays vue.js
edited Nov 20 '18 at 2:25
Cœur
18k9108147
asked Aug 13 '18 at 5:51
Brenda EichelbergerBrenda Eichelberger
32
edited Nov 20 '18 at 2:25
Cœur
18k9108147
asked Aug 13 '18 at 5:51
Brenda EichelbergerBrenda Eichelberger
32
edited Nov 20 '18 at 2:25
Cœur
18k9108147
edited Nov 20 '18 at 2:25
Cœur
18k9108147
edited Nov 20 '18 at 2:25
Cœur
18k9108147
18k9108147
asked Aug 13 '18 at 5:51
Brenda EichelbergerBrenda Eichelberger
32
asked Aug 13 '18 at 5:51
Brenda EichelbergerBrenda Eichelberger
32
asked Aug 13 '18 at 5:51
Brenda EichelbergerBrenda Eichelberger
32
32
1
Welcome to Stack Overflow! Please edit your question to clarify the part of your code you are having trouble with. Currently it is not clear what your question is. Questions without a clear problem statement are not useful to other readers. See: How to create a Minimal, Complete, and Verifiable example.
– girlvsdata
Aug 13 '18 at 6:01
Can you replace this line: if (this.breadtype == '') with if (this.breadtype == ='') and <li v-for="(toast, index) in breadslices"> with <li v-for="let (index, toast) of breadslices"> if it helps ill post it as solution, thanks.
– josip
Aug 13 '18 at 7:41
add a comment |
1
Welcome to Stack Overflow! Please edit your question to clarify the part of your code you are having trouble with. Currently it is not clear what your question is. Questions without a clear problem statement are not useful to other readers. See: How to create a Minimal, Complete, and Verifiable example.
– girlvsdata
Aug 13 '18 at 6:01
Can you replace this line: if (this.breadtype == '') with if (this.breadtype == ='') and <li v-for="(toast, index) in breadslices"> with <li v-for="let (index, toast) of breadslices"> if it helps ill post it as solution, thanks.
– josip
Aug 13 '18 at 7:41
1
1
Welcome to Stack Overflow! Please edit your question to clarify the part of your code you are having trouble with. Currently it is not clear what your question is. Questions without a clear problem statement are not useful to other readers. See: How to create a Minimal, Complete, and Verifiable example.
– girlvsdata
Aug 13 '18 at 6:01
Welcome to Stack Overflow! Please edit your question to clarify the part of your code you are having trouble with. Currently it is not clear what your question is. Questions without a clear problem statement are not useful to other readers. See: How to create a Minimal, Complete, and Verifiable example.
– girlvsdata
Aug 13 '18 at 6:01
Can you replace this line: if (this.breadtype == '') with if (this.breadtype == ='') and <li v-for="(toast, index) in breadslices"> with <li v-for="let (index, toast) of breadslices"> if it helps ill post it as solution, thanks.
– josip
Aug 13 '18 at 7:41
Can you replace this line: if (this.breadtype == '') with if (this.breadtype == ='') and <li v-for="(toast, index) in breadslices"> with <li v-for="let (index, toast) of breadslices"> if it helps ill post it as solution, thanks.
– josip
Aug 13 '18 at 7:41
add a comment |
1 Answer
1
active
oldest
votes
0
Your implementation is almost there. I just reformatted some of your code to make it work.
I moved the
var toast = {
breadtype: this.breadtype,
toaststatus: this.toaststatus
};
into just before the
this.breadslices.push(toast);
so that the latest changes to the this.breadtype and this.toaststatus will be added to the history.
Regarding the breadslices: data, I'm not sure what is the contents of that data variable so I just replaced it with an empty array to make the example work.
Here's the full code:
//VueJS Toaster
/* Requirements:
Make a toaster in OOP. It should be able to toast sour dough, wheat and rye, but it should reject white and english muffins. Also, it should never burn rye, but should have a random chance to burn sour dough and wheat.
Build a page to display in real time the results of each toaster use, including a historical log of past usage (show 10+ random results). This should be written in VueJS
*/
new Vue({
el: '#app',
data: {
breadslices: ,
breadtype: '',
toaststatus: ''
},
methods: {
toastSlice: function() {
console.log(this.breadtype);
if (this.breadtype == '') {
alert("Enter rye, wheat, white, english muffin, or sour dough");
return;
}
if (this.breadtype === "english muffin" || this.breadtype === "white") {
this.toaststatus = "rejected";
}
if (this.breadtype === "rye") {
this.toaststatus = "toasted";
} else if (this.breadtype === "sour dough" || this.breadtype === "wheat") {
//Random Boolean >=.5 Burnt
var randomburnt = Math.random() >= 0.5;
if (randomburnt >= 0.5) {
this.toaststatus = "burnt";
} else {
this.toaststatus = "toasted";
}
}
var toast = {
breadtype: this.breadtype,
toaststatus: this.toaststatus
};
this.breadslices.push(toast);
alert("The " + toast.breadtype + " slice was " + toast.toaststatus);
this.breadtype = "";
this.toaststatus = "";
}
}
});.container {
background: url("http://res.cloudinary.com/mountainocean9/image/upload/c_scale,w_600/v1534051512/samples/projects/toaster-306580_1280.png") no-repeat;
position: relative;
text-align: center;
color: #000;
padding: 5em 0;
margin-bottom: 2em;
}
.title h1 {
font-family: Arial Black, "Helvetica Neue", Helvetica, sans-serif;
font-size: 5em;
color: #000;
margin-top: 15%;
}
.container p {
margin-bottom: 2em;
}
.toaster-slot-top {
position: absolute;
top: 37px;
left: 100px;
}
::placeholder {
/* Chrome, Firefox, Opera, Safari 10.1+ */
color: red;
opacity: 1;
/* Firefox */
}
::placeholder:hover {
/* Chrome, Firefox, Opera, Safari 10.1+ */
color: white;
opacity: 1;
/* Firefox */
}
.toaster-slot-top input {
width: 380px;
border: none;
background-color: #434746;
color: #fff;
}
button {
position: absolute;
left: 563px;
background: #000;
width: 58px;
height: 80px;
border-radius: 7px;
color: red;
box-shadow: 10px 10px 5px grey;
}
button:hover {
color: #fff;
width: 58px;
height: 80px;
border-radius: 7px;
}
.toaster-history {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
position: absolute;
left: 900px;
top: 70px;
width: 300px;
height: 400px;
background: #d3d7cf;
color: #000;
border: solid 5px #000;
padding-left: 20px;
overflow: scroll;
}<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div id="app">
<div class="container">
<div class="toaster-slot-top">
<input type=text v-model="breadtype" placeholder="ENTER (rye, wheat, white, english muffin or sour dough)">
</div>
<button type="submit" v-on:click="toastSlice">TOAST</button>
<div class="title">
<h1>TOASTER</h1>
</div>
<div class="toaster-history">
<h2>TOASTER HISTORY</h2>
<div>
<ul>
<li v-for="(toast, index) in breadslices">
{{toast.breadtype}} slice was {{toast.toaststatus}}
</li>
</ul>
</div>
</div>
</div>
</div>Here's a JS Fiddle:
(Your codepen doesn't work so I transferred it to JSFiddle)
https://jsfiddle.net/eywraw8t/264993/
answered Aug 13 '18 at 8:07
Julian Paolo DayagJulian Paolo Dayag
1,85131025
Thanks Julian! works great
– Brenda Eichelberger
Aug 13 '18 at 17:35
Sure, No problem :)
– Julian Paolo Dayag
Aug 13 '18 at 17:38
add a comment |
Your Answer
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: "1"
};
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: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
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%2fstackoverflow.com%2fquestions%2f51815882%2fmultidimensional-array-in-vuejs%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
0
Your implementation is almost there. I just reformatted some of your code to make it work.
I moved the
var toast = {
breadtype: this.breadtype,
toaststatus: this.toaststatus
};
into just before the
this.breadslices.push(toast);
so that the latest changes to the this.breadtype and this.toaststatus will be added to the history.
Regarding the breadslices: data, I'm not sure what is the contents of that data variable so I just replaced it with an empty array to make the example work.
Here's the full code:
//VueJS Toaster
/* Requirements:
Make a toaster in OOP. It should be able to toast sour dough, wheat and rye, but it should reject white and english muffins. Also, it should never burn rye, but should have a random chance to burn sour dough and wheat.
Build a page to display in real time the results of each toaster use, including a historical log of past usage (show 10+ random results). This should be written in VueJS
*/
new Vue({
el: '#app',
data: {
breadslices: ,
breadtype: '',
toaststatus: ''
},
methods: {
toastSlice: function() {
console.log(this.breadtype);
if (this.breadtype == '') {
alert("Enter rye, wheat, white, english muffin, or sour dough");
return;
}
if (this.breadtype === "english muffin" || this.breadtype === "white") {
this.toaststatus = "rejected";
}
if (this.breadtype === "rye") {
this.toaststatus = "toasted";
} else if (this.breadtype === "sour dough" || this.breadtype === "wheat") {
//Random Boolean >=.5 Burnt
var randomburnt = Math.random() >= 0.5;
if (randomburnt >= 0.5) {
this.toaststatus = "burnt";
} else {
this.toaststatus = "toasted";
}
}
var toast = {
breadtype: this.breadtype,
toaststatus: this.toaststatus
};
this.breadslices.push(toast);
alert("The " + toast.breadtype + " slice was " + toast.toaststatus);
this.breadtype = "";
this.toaststatus = "";
}
}
});.container {
background: url("http://res.cloudinary.com/mountainocean9/image/upload/c_scale,w_600/v1534051512/samples/projects/toaster-306580_1280.png") no-repeat;
position: relative;
text-align: center;
color: #000;
padding: 5em 0;
margin-bottom: 2em;
}
.title h1 {
font-family: Arial Black, "Helvetica Neue", Helvetica, sans-serif;
font-size: 5em;
color: #000;
margin-top: 15%;
}
.container p {
margin-bottom: 2em;
}
.toaster-slot-top {
position: absolute;
top: 37px;
left: 100px;
}
::placeholder {
/* Chrome, Firefox, Opera, Safari 10.1+ */
color: red;
opacity: 1;
/* Firefox */
}
::placeholder:hover {
/* Chrome, Firefox, Opera, Safari 10.1+ */
color: white;
opacity: 1;
/* Firefox */
}
.toaster-slot-top input {
width: 380px;
border: none;
background-color: #434746;
color: #fff;
}
button {
position: absolute;
left: 563px;
background: #000;
width: 58px;
height: 80px;
border-radius: 7px;
color: red;
box-shadow: 10px 10px 5px grey;
}
button:hover {
color: #fff;
width: 58px;
height: 80px;
border-radius: 7px;
}
.toaster-history {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
position: absolute;
left: 900px;
top: 70px;
width: 300px;
height: 400px;
background: #d3d7cf;
color: #000;
border: solid 5px #000;
padding-left: 20px;
overflow: scroll;
}<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div id="app">
<div class="container">
<div class="toaster-slot-top">
<input type=text v-model="breadtype" placeholder="ENTER (rye, wheat, white, english muffin or sour dough)">
</div>
<button type="submit" v-on:click="toastSlice">TOAST</button>
<div class="title">
<h1>TOASTER</h1>
</div>
<div class="toaster-history">
<h2>TOASTER HISTORY</h2>
<div>
<ul>
<li v-for="(toast, index) in breadslices">
{{toast.breadtype}} slice was {{toast.toaststatus}}
</li>
</ul>
</div>
</div>
</div>
</div>Here's a JS Fiddle:
(Your codepen doesn't work so I transferred it to JSFiddle)
https://jsfiddle.net/eywraw8t/264993/
answered Aug 13 '18 at 8:07
Julian Paolo DayagJulian Paolo Dayag
1,85131025
Thanks Julian! works great
– Brenda Eichelberger
Aug 13 '18 at 17:35
Sure, No problem :)
– Julian Paolo Dayag
Aug 13 '18 at 17:38
add a comment |
0
Your implementation is almost there. I just reformatted some of your code to make it work.
I moved the
var toast = {
breadtype: this.breadtype,
toaststatus: this.toaststatus
};
into just before the
this.breadslices.push(toast);
so that the latest changes to the this.breadtype and this.toaststatus will be added to the history.
Regarding the breadslices: data, I'm not sure what is the contents of that data variable so I just replaced it with an empty array to make the example work.
Here's the full code:
//VueJS Toaster
/* Requirements:
Make a toaster in OOP. It should be able to toast sour dough, wheat and rye, but it should reject white and english muffins. Also, it should never burn rye, but should have a random chance to burn sour dough and wheat.
Build a page to display in real time the results of each toaster use, including a historical log of past usage (show 10+ random results). This should be written in VueJS
*/
new Vue({
el: '#app',
data: {
breadslices: ,
breadtype: '',
toaststatus: ''
},
methods: {
toastSlice: function() {
console.log(this.breadtype);
if (this.breadtype == '') {
alert("Enter rye, wheat, white, english muffin, or sour dough");
return;
}
if (this.breadtype === "english muffin" || this.breadtype === "white") {
this.toaststatus = "rejected";
}
if (this.breadtype === "rye") {
this.toaststatus = "toasted";
} else if (this.breadtype === "sour dough" || this.breadtype === "wheat") {
//Random Boolean >=.5 Burnt
var randomburnt = Math.random() >= 0.5;
if (randomburnt >= 0.5) {
this.toaststatus = "burnt";
} else {
this.toaststatus = "toasted";
}
}
var toast = {
breadtype: this.breadtype,
toaststatus: this.toaststatus
};
this.breadslices.push(toast);
alert("The " + toast.breadtype + " slice was " + toast.toaststatus);
this.breadtype = "";
this.toaststatus = "";
}
}
});.container {
background: url("http://res.cloudinary.com/mountainocean9/image/upload/c_scale,w_600/v1534051512/samples/projects/toaster-306580_1280.png") no-repeat;
position: relative;
text-align: center;
color: #000;
padding: 5em 0;
margin-bottom: 2em;
}
.title h1 {
font-family: Arial Black, "Helvetica Neue", Helvetica, sans-serif;
font-size: 5em;
color: #000;
margin-top: 15%;
}
.container p {
margin-bottom: 2em;
}
.toaster-slot-top {
position: absolute;
top: 37px;
left: 100px;
}
::placeholder {
/* Chrome, Firefox, Opera, Safari 10.1+ */
color: red;
opacity: 1;
/* Firefox */
}
::placeholder:hover {
/* Chrome, Firefox, Opera, Safari 10.1+ */
color: white;
opacity: 1;
/* Firefox */
}
.toaster-slot-top input {
width: 380px;
border: none;
background-color: #434746;
color: #fff;
}
button {
position: absolute;
left: 563px;
background: #000;
width: 58px;
height: 80px;
border-radius: 7px;
color: red;
box-shadow: 10px 10px 5px grey;
}
button:hover {
color: #fff;
width: 58px;
height: 80px;
border-radius: 7px;
}
.toaster-history {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
position: absolute;
left: 900px;
top: 70px;
width: 300px;
height: 400px;
background: #d3d7cf;
color: #000;
border: solid 5px #000;
padding-left: 20px;
overflow: scroll;
}<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div id="app">
<div class="container">
<div class="toaster-slot-top">
<input type=text v-model="breadtype" placeholder="ENTER (rye, wheat, white, english muffin or sour dough)">
</div>
<button type="submit" v-on:click="toastSlice">TOAST</button>
<div class="title">
<h1>TOASTER</h1>
</div>
<div class="toaster-history">
<h2>TOASTER HISTORY</h2>
<div>
<ul>
<li v-for="(toast, index) in breadslices">
{{toast.breadtype}} slice was {{toast.toaststatus}}
</li>
</ul>
</div>
</div>
</div>
</div>Here's a JS Fiddle:
(Your codepen doesn't work so I transferred it to JSFiddle)
https://jsfiddle.net/eywraw8t/264993/
answered Aug 13 '18 at 8:07
Julian Paolo DayagJulian Paolo Dayag
1,85131025
Thanks Julian! works great
– Brenda Eichelberger
Aug 13 '18 at 17:35
Sure, No problem :)
– Julian Paolo Dayag
Aug 13 '18 at 17:38
add a comment |
0
0
0
Your implementation is almost there. I just reformatted some of your code to make it work.
I moved the
var toast = {
breadtype: this.breadtype,
toaststatus: this.toaststatus
};
into just before the
this.breadslices.push(toast);
so that the latest changes to the this.breadtype and this.toaststatus will be added to the history.
Regarding the breadslices: data, I'm not sure what is the contents of that data variable so I just replaced it with an empty array to make the example work.
Here's the full code:
//VueJS Toaster
/* Requirements:
Make a toaster in OOP. It should be able to toast sour dough, wheat and rye, but it should reject white and english muffins. Also, it should never burn rye, but should have a random chance to burn sour dough and wheat.
Build a page to display in real time the results of each toaster use, including a historical log of past usage (show 10+ random results). This should be written in VueJS
*/
new Vue({
el: '#app',
data: {
breadslices: ,
breadtype: '',
toaststatus: ''
},
methods: {
toastSlice: function() {
console.log(this.breadtype);
if (this.breadtype == '') {
alert("Enter rye, wheat, white, english muffin, or sour dough");
return;
}
if (this.breadtype === "english muffin" || this.breadtype === "white") {
this.toaststatus = "rejected";
}
if (this.breadtype === "rye") {
this.toaststatus = "toasted";
} else if (this.breadtype === "sour dough" || this.breadtype === "wheat") {
//Random Boolean >=.5 Burnt
var randomburnt = Math.random() >= 0.5;
if (randomburnt >= 0.5) {
this.toaststatus = "burnt";
} else {
this.toaststatus = "toasted";
}
}
var toast = {
breadtype: this.breadtype,
toaststatus: this.toaststatus
};
this.breadslices.push(toast);
alert("The " + toast.breadtype + " slice was " + toast.toaststatus);
this.breadtype = "";
this.toaststatus = "";
}
}
});.container {
background: url("http://res.cloudinary.com/mountainocean9/image/upload/c_scale,w_600/v1534051512/samples/projects/toaster-306580_1280.png") no-repeat;
position: relative;
text-align: center;
color: #000;
padding: 5em 0;
margin-bottom: 2em;
}
.title h1 {
font-family: Arial Black, "Helvetica Neue", Helvetica, sans-serif;
font-size: 5em;
color: #000;
margin-top: 15%;
}
.container p {
margin-bottom: 2em;
}
.toaster-slot-top {
position: absolute;
top: 37px;
left: 100px;
}
::placeholder {
/* Chrome, Firefox, Opera, Safari 10.1+ */
color: red;
opacity: 1;
/* Firefox */
}
::placeholder:hover {
/* Chrome, Firefox, Opera, Safari 10.1+ */
color: white;
opacity: 1;
/* Firefox */
}
.toaster-slot-top input {
width: 380px;
border: none;
background-color: #434746;
color: #fff;
}
button {
position: absolute;
left: 563px;
background: #000;
width: 58px;
height: 80px;
border-radius: 7px;
color: red;
box-shadow: 10px 10px 5px grey;
}
button:hover {
color: #fff;
width: 58px;
height: 80px;
border-radius: 7px;
}
.toaster-history {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
position: absolute;
left: 900px;
top: 70px;
width: 300px;
height: 400px;
background: #d3d7cf;
color: #000;
border: solid 5px #000;
padding-left: 20px;
overflow: scroll;
}<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div id="app">
<div class="container">
<div class="toaster-slot-top">
<input type=text v-model="breadtype" placeholder="ENTER (rye, wheat, white, english muffin or sour dough)">
</div>
<button type="submit" v-on:click="toastSlice">TOAST</button>
<div class="title">
<h1>TOASTER</h1>
</div>
<div class="toaster-history">
<h2>TOASTER HISTORY</h2>
<div>
<ul>
<li v-for="(toast, index) in breadslices">
{{toast.breadtype}} slice was {{toast.toaststatus}}
</li>
</ul>
</div>
</div>
</div>
</div>Here's a JS Fiddle:
(Your codepen doesn't work so I transferred it to JSFiddle)
https://jsfiddle.net/eywraw8t/264993/
answered Aug 13 '18 at 8:07
Julian Paolo DayagJulian Paolo Dayag
1,85131025
Your implementation is almost there. I just reformatted some of your code to make it work.
I moved the
var toast = {
breadtype: this.breadtype,
toaststatus: this.toaststatus
};
into just before the
this.breadslices.push(toast);
so that the latest changes to the this.breadtype and this.toaststatus will be added to the history.
Regarding the breadslices: data, I'm not sure what is the contents of that data variable so I just replaced it with an empty array to make the example work.
Here's the full code:
//VueJS Toaster
/* Requirements:
Make a toaster in OOP. It should be able to toast sour dough, wheat and rye, but it should reject white and english muffins. Also, it should never burn rye, but should have a random chance to burn sour dough and wheat.
Build a page to display in real time the results of each toaster use, including a historical log of past usage (show 10+ random results). This should be written in VueJS
*/
new Vue({
el: '#app',
data: {
breadslices: ,
breadtype: '',
toaststatus: ''
},
methods: {
toastSlice: function() {
console.log(this.breadtype);
if (this.breadtype == '') {
alert("Enter rye, wheat, white, english muffin, or sour dough");
return;
}
if (this.breadtype === "english muffin" || this.breadtype === "white") {
this.toaststatus = "rejected";
}
if (this.breadtype === "rye") {
this.toaststatus = "toasted";
} else if (this.breadtype === "sour dough" || this.breadtype === "wheat") {
//Random Boolean >=.5 Burnt
var randomburnt = Math.random() >= 0.5;
if (randomburnt >= 0.5) {
this.toaststatus = "burnt";
} else {
this.toaststatus = "toasted";
}
}
var toast = {
breadtype: this.breadtype,
toaststatus: this.toaststatus
};
this.breadslices.push(toast);
alert("The " + toast.breadtype + " slice was " + toast.toaststatus);
this.breadtype = "";
this.toaststatus = "";
}
}
});.container {
background: url("http://res.cloudinary.com/mountainocean9/image/upload/c_scale,w_600/v1534051512/samples/projects/toaster-306580_1280.png") no-repeat;
position: relative;
text-align: center;
color: #000;
padding: 5em 0;
margin-bottom: 2em;
}
.title h1 {
font-family: Arial Black, "Helvetica Neue", Helvetica, sans-serif;
font-size: 5em;
color: #000;
margin-top: 15%;
}
.container p {
margin-bottom: 2em;
}
.toaster-slot-top {
position: absolute;
top: 37px;
left: 100px;
}
::placeholder {
/* Chrome, Firefox, Opera, Safari 10.1+ */
color: red;
opacity: 1;
/* Firefox */
}
::placeholder:hover {
/* Chrome, Firefox, Opera, Safari 10.1+ */
color: white;
opacity: 1;
/* Firefox */
}
.toaster-slot-top input {
width: 380px;
border: none;
background-color: #434746;
color: #fff;
}
button {
position: absolute;
left: 563px;
background: #000;
width: 58px;
height: 80px;
border-radius: 7px;
color: red;
box-shadow: 10px 10px 5px grey;
}
button:hover {
color: #fff;
width: 58px;
height: 80px;
border-radius: 7px;
}
.toaster-history {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
position: absolute;
left: 900px;
top: 70px;
width: 300px;
height: 400px;
background: #d3d7cf;
color: #000;
border: solid 5px #000;
padding-left: 20px;
overflow: scroll;
}<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div id="app">
<div class="container">
<div class="toaster-slot-top">
<input type=text v-model="breadtype" placeholder="ENTER (rye, wheat, white, english muffin or sour dough)">
</div>
<button type="submit" v-on:click="toastSlice">TOAST</button>
<div class="title">
<h1>TOASTER</h1>
</div>
<div class="toaster-history">
<h2>TOASTER HISTORY</h2>
<div>
<ul>
<li v-for="(toast, index) in breadslices">
{{toast.breadtype}} slice was {{toast.toaststatus}}
</li>
</ul>
</div>
</div>
</div>
</div>Here's a JS Fiddle:
(Your codepen doesn't work so I transferred it to JSFiddle)
https://jsfiddle.net/eywraw8t/264993/
//VueJS Toaster
/* Requirements:
Make a toaster in OOP. It should be able to toast sour dough, wheat and rye, but it should reject white and english muffins. Also, it should never burn rye, but should have a random chance to burn sour dough and wheat.
Build a page to display in real time the results of each toaster use, including a historical log of past usage (show 10+ random results). This should be written in VueJS
*/
new Vue({
el: '#app',
data: {
breadslices: ,
breadtype: '',
toaststatus: ''
},
methods: {
toastSlice: function() {
console.log(this.breadtype);
if (this.breadtype == '') {
alert("Enter rye, wheat, white, english muffin, or sour dough");
return;
}
if (this.breadtype === "english muffin" || this.breadtype === "white") {
this.toaststatus = "rejected";
}
if (this.breadtype === "rye") {
this.toaststatus = "toasted";
} else if (this.breadtype === "sour dough" || this.breadtype === "wheat") {
//Random Boolean >=.5 Burnt
var randomburnt = Math.random() >= 0.5;
if (randomburnt >= 0.5) {
this.toaststatus = "burnt";
} else {
this.toaststatus = "toasted";
}
}
var toast = {
breadtype: this.breadtype,
toaststatus: this.toaststatus
};
this.breadslices.push(toast);
alert("The " + toast.breadtype + " slice was " + toast.toaststatus);
this.breadtype = "";
this.toaststatus = "";
}
}
});.container {
background: url("http://res.cloudinary.com/mountainocean9/image/upload/c_scale,w_600/v1534051512/samples/projects/toaster-306580_1280.png") no-repeat;
position: relative;
text-align: center;
color: #000;
padding: 5em 0;
margin-bottom: 2em;
}
.title h1 {
font-family: Arial Black, "Helvetica Neue", Helvetica, sans-serif;
font-size: 5em;
color: #000;
margin-top: 15%;
}
.container p {
margin-bottom: 2em;
}
.toaster-slot-top {
position: absolute;
top: 37px;
left: 100px;
}
::placeholder {
/* Chrome, Firefox, Opera, Safari 10.1+ */
color: red;
opacity: 1;
/* Firefox */
}
::placeholder:hover {
/* Chrome, Firefox, Opera, Safari 10.1+ */
color: white;
opacity: 1;
/* Firefox */
}
.toaster-slot-top input {
width: 380px;
border: none;
background-color: #434746;
color: #fff;
}
button {
position: absolute;
left: 563px;
background: #000;
width: 58px;
height: 80px;
border-radius: 7px;
color: red;
box-shadow: 10px 10px 5px grey;
}
button:hover {
color: #fff;
width: 58px;
height: 80px;
border-radius: 7px;
}
.toaster-history {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
position: absolute;
left: 900px;
top: 70px;
width: 300px;
height: 400px;
background: #d3d7cf;
color: #000;
border: solid 5px #000;
padding-left: 20px;
overflow: scroll;
}<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div id="app">
<div class="container">
<div class="toaster-slot-top">
<input type=text v-model="breadtype" placeholder="ENTER (rye, wheat, white, english muffin or sour dough)">
</div>
<button type="submit" v-on:click="toastSlice">TOAST</button>
<div class="title">
<h1>TOASTER</h1>
</div>
<div class="toaster-history">
<h2>TOASTER HISTORY</h2>
<div>
<ul>
<li v-for="(toast, index) in breadslices">
{{toast.breadtype}} slice was {{toast.toaststatus}}
</li>
</ul>
</div>
</div>
</div>
</div>//VueJS Toaster
/* Requirements:
Make a toaster in OOP. It should be able to toast sour dough, wheat and rye, but it should reject white and english muffins. Also, it should never burn rye, but should have a random chance to burn sour dough and wheat.
Build a page to display in real time the results of each toaster use, including a historical log of past usage (show 10+ random results). This should be written in VueJS
*/
new Vue({
el: '#app',
data: {
breadslices: ,
breadtype: '',
toaststatus: ''
},
methods: {
toastSlice: function() {
console.log(this.breadtype);
if (this.breadtype == '') {
alert("Enter rye, wheat, white, english muffin, or sour dough");
return;
}
if (this.breadtype === "english muffin" || this.breadtype === "white") {
this.toaststatus = "rejected";
}
if (this.breadtype === "rye") {
this.toaststatus = "toasted";
} else if (this.breadtype === "sour dough" || this.breadtype === "wheat") {
//Random Boolean >=.5 Burnt
var randomburnt = Math.random() >= 0.5;
if (randomburnt >= 0.5) {
this.toaststatus = "burnt";
} else {
this.toaststatus = "toasted";
}
}
var toast = {
breadtype: this.breadtype,
toaststatus: this.toaststatus
};
this.breadslices.push(toast);
alert("The " + toast.breadtype + " slice was " + toast.toaststatus);
this.breadtype = "";
this.toaststatus = "";
}
}
});.container {
background: url("http://res.cloudinary.com/mountainocean9/image/upload/c_scale,w_600/v1534051512/samples/projects/toaster-306580_1280.png") no-repeat;
position: relative;
text-align: center;
color: #000;
padding: 5em 0;
margin-bottom: 2em;
}
.title h1 {
font-family: Arial Black, "Helvetica Neue", Helvetica, sans-serif;
font-size: 5em;
color: #000;
margin-top: 15%;
}
.container p {
margin-bottom: 2em;
}
.toaster-slot-top {
position: absolute;
top: 37px;
left: 100px;
}
::placeholder {
/* Chrome, Firefox, Opera, Safari 10.1+ */
color: red;
opacity: 1;
/* Firefox */
}
::placeholder:hover {
/* Chrome, Firefox, Opera, Safari 10.1+ */
color: white;
opacity: 1;
/* Firefox */
}
.toaster-slot-top input {
width: 380px;
border: none;
background-color: #434746;
color: #fff;
}
button {
position: absolute;
left: 563px;
background: #000;
width: 58px;
height: 80px;
border-radius: 7px;
color: red;
box-shadow: 10px 10px 5px grey;
}
button:hover {
color: #fff;
width: 58px;
height: 80px;
border-radius: 7px;
}
.toaster-history {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
position: absolute;
left: 900px;
top: 70px;
width: 300px;
height: 400px;
background: #d3d7cf;
color: #000;
border: solid 5px #000;
padding-left: 20px;
overflow: scroll;
}<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div id="app">
<div class="container">
<div class="toaster-slot-top">
<input type=text v-model="breadtype" placeholder="ENTER (rye, wheat, white, english muffin or sour dough)">
</div>
<button type="submit" v-on:click="toastSlice">TOAST</button>
<div class="title">
<h1>TOASTER</h1>
</div>
<div class="toaster-history">
<h2>TOASTER HISTORY</h2>
<div>
<ul>
<li v-for="(toast, index) in breadslices">
{{toast.breadtype}} slice was {{toast.toaststatus}}
</li>
</ul>
</div>
</div>
</div>
</div>answered Aug 13 '18 at 8:07
Julian Paolo DayagJulian Paolo Dayag
1,85131025
answered Aug 13 '18 at 8:07
Julian Paolo DayagJulian Paolo Dayag
1,85131025
answered Aug 13 '18 at 8:07
Julian Paolo DayagJulian Paolo Dayag
1,85131025
answered Aug 13 '18 at 8:07
Julian Paolo DayagJulian Paolo Dayag
1,85131025
1,85131025
Thanks Julian! works great
– Brenda Eichelberger
Aug 13 '18 at 17:35
Sure, No problem :)
– Julian Paolo Dayag
Aug 13 '18 at 17:38
add a comment |
Thanks Julian! works great
– Brenda Eichelberger
Aug 13 '18 at 17:35
Sure, No problem :)
– Julian Paolo Dayag
Aug 13 '18 at 17:38
Thanks Julian! works great
– Brenda Eichelberger
Aug 13 '18 at 17:35
Thanks Julian! works great
– Brenda Eichelberger
Aug 13 '18 at 17:35
Sure, No problem :)
– Julian Paolo Dayag
Aug 13 '18 at 17:38
Sure, No problem :)
– Julian Paolo Dayag
Aug 13 '18 at 17:38
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- 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.
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%2fstackoverflow.com%2fquestions%2f51815882%2fmultidimensional-array-in-vuejs%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
1
Welcome to Stack Overflow! Please edit your question to clarify the part of your code you are having trouble with. Currently it is not clear what your question is. Questions without a clear problem statement are not useful to other readers. See: How to create a Minimal, Complete, and Verifiable example.
– girlvsdata
Aug 13 '18 at 6:01
Can you replace this line: if (this.breadtype == '') with if (this.breadtype == ='') and <li v-for="(toast, index) in breadslices"> with <li v-for="let (index, toast) of breadslices"> if it helps ill post it as solution, thanks.
– josip
Aug 13 '18 at 7:41