VueJS中的多维数组

Question

使用VueJS从表单输入创建数组，处理并显示每个已处理输入的历史记录。这是一个烤面包机，可处理不同类型的面包，且结果不同。要求如下：     在OOP中做一个烤面包机。它应该能够烤出酵母，小麦和黑麦，     但是它应该拒绝白人和英国人的松饼。而且，它永远不要燃烧黑麦，而应该有随机的机会燃烧酵母和小麦。     建立一个页面以实时显示每次烤面包机使用的结果，     包括过去使用情况的历史记录（显示10多个随机结果）。这个     应该用VueJS写 没用请参阅我的代码笔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>

Answer 1

您的实现即将完成。我只是重新格式化了一些代码以使其正常工作。

我移动了

var toast = {
    breadtype: this.breadtype,
    toaststatus: this.toaststatus
  };

进入

之前

this.breadslices.push(toast);

，以便将this.breadtype和this.toaststatus的最新更改添加到history。

关于breadslices: data，我不确定该data变量的内容是什么，因此我只是将其替换为空数组以使示例工作。

这是完整的代码：

//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>

这是一个JS小提琴： （您的codepen无法正常工作，所以我将其转移到了JSFiddle）

https://jsfiddle.net/eywraw8t/264993/