Practice Set 2 - VueJS

by jessupjs

HTML

<h2>
  VueJS Exercise: Create the data and a button action
</h2>
<!--p>
  In this exercise, we've created a skeletal Vue object in JavaScript and a template in the HTML that displays a generic button.  
</p>
<p>
  Your tasks are to:
  <ul>
    <li>Create some data for the object, and display this data in the HTML using the Vue template language. It can be anything: a single value or simple object, or a list</li>
    <li>Create a method that does something with the data, and connect it to the button, so that when the button is clicked, the data, or its display changes. For example, you might use the button to change a property, add an item to a list, remove or hide an item, or change the display style of the list. </li>
    <li>If the change is just to the display style, be sure to use a Vue property and directive (<a href="https://vuejs.org/v2/guide/class-and-style.html" target="_blank")>see Class and Style Bindings)</a> to manifest the change.</li>
  </ul>
</p-->

<div id="app">
  <h3>Fabrics</h3>
  <ul>
    <li v-for="(fabric, i) in fabrics">
      <span class="label">{{ fabric.type }} ({{ fabric.origin }})</span>
      <span class="invStatus">&times; {{ fabric.quantity }} </span>
      <button class='math' v-on:click='subtract(i)'>
      	&#45;
      </button>
      <button class='math' v-on:click='add(i)'>
      	&#43;
      </button>
      <button class='redX' v-on:click='remove(i)'>
      	&#10060;
      </button>
    </li>
  </ul>
  <form>
    <h3>+</h3>
    <label><span class="label">Fabric Type:</span>
      <input type="text" v-model="newFabric.type">
    </label><br>
    <label><span class="label">Fabric Origin:</span>
      <input type="text" v-model="newFabric.origin">
    </label><br>
    <label><span class="label">Start Quantity:</span>
      <input type="text" v-model="newFabric.quantity">
    </label><br><br>
    <button type="button" v-on:click="addFabric()">
      ADD
    </button>
  </form>
</div>

CSS

* {
  border: 0;
  margin: 0;
  padding: 0.25%;
}

#app {
  width: 100%;
}

h3 {
  color: white;
  background-color: red;
  padding: 0 1%;
  margin: 1% 0;
}

.redX {
  padding: 0 0 0 0.75%;
  font-size: 0.9rem;
}

.math {
  color: black;
  background-color: white;
}

.label {
  display: inline-block;
  width: 20%;
}

.invStatus {
  display: inline-block;
  width: 10%;
  }

input {
  border: 1px solid black;
  padding: 0.25%;
}

button {
  background-color: black;
  padding: 0 0.5% 0.25% 0.5%;
  color: white;
  font-size: 1.2rem;
}

Vue

var v = new Vue({
    el: '#app',
    data: {
    	fabrics: [
      	{ type: 'Indigo', origin: 'Nigeria', quantity: 15 },
        { type: 'Bogolan', origin: 'Mali', quantity: 22 },
        { type: 'Kente', origin: 'Ghana', quantity: 8 },
        { type: 'Kuba', origin: 'Congo', quantity: 18 }
      ],
      newFabric: { type: '', origin: '', quantity: null}
    },
    methods : {
    	subtract : function(i) {
      	if(this.fabrics[i].quantity > 0) {
      		this.fabrics[i].quantity--;
        }
      },
    	add : function(i) {
      	this.fabrics[i].quantity++;
      },
    	remove : function(i) {
      	this.fabrics.splice(i, 1);
      },
      addFabric : function() {
      	this.fabrics.push({
        	type: this.newFabric.type,
          origin: this.newFabric.origin,
          quantity: this.newFabric.quantity
        });
        this.newFabric.type = '';
       	this.newFabric.origin = '';
        this.newFabric.quantity = null;
      }
    }
});