[Vuejs]-Multidimensional Array in VueJS

by

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/

Leave a comment