JSFiddle - React, Tailwind, and code Playground

by Maiki Nahara

HTML

<script src="https://vuejs.org/js/vue.js"></script>
<script src="https://cdn.jsdelivr.net/vue.resource/1.2.1/vue-resource.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-router.js"></script>
<script src="https://unpkg.com/[email protected]"></script>
<h2>Sample VueJS</h2>

<div class="container">
  <main id="app"></main>
</div>

<template id="product-list" name="testbrent" v-on:productsUpdated="onProductsUpdated">
  <section>
    <div class="actions">
      <router-link class="btn btn-default" :to="{path: '/add-product'}">
        <span class="glyphicon glyphicon-plus"></span> Add product
      </router-link>
    </div>
    <table class="table">
      <thead>
        <tr>
          <th>Name</th>
          <th>Description</th>
          <th>Quantity</th>
          <th>Price</th>
          <th class="col-sm-2">Actions</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="product in productsL">
          <td>
            <router-link :to="{name: 'product', params: {product_id: product.id}}">{{ product.name }}</router-link>
          </td>
          <td>{{ product.desc }}</td>
          <td>{{ product.qty }}</td>
          <td style="white-space: nowrap">
            <span class="glyphicon glyphicon-usd" aria-hidden="true"></span>{{ product.prc }}
          </td>
          <td>
            <router-link class="btn btn-warning btn-xs" :to="{name: 'product-edit', params: {product_id: product.id}}">Edit</router-link>
            <router-link class="btn btn-danger btn-xs" :to="{name: 'product-delete', params: {product_id: product.id}}">Delete</router-link>
          </td>
        </tr>
      </tbody>
    </table>
  </section>
</template>
<template id="add-product">
  <section>
    <h2>Add new product</h2>
    <form>
      <div class="form-group">
        <label for="add-name">Name</label>
        <input class="form-control" id="add-name" v-model="product.name" required />
      </div>
      <div class="form-group">
        <label...

JavaScript

// Make sure to call Vue.use(Vuex) first if using a module system

const store = new Vuex.Store({
  state: {
    productList: []
  },
  mutations: {
    addProduct(state, payload) {
      state.productList.push({
        name: payload.name,
        desc: payload.desc,
        qty: payload.qty,
        prc: payload.prc
      })
    }
  }
});
//I tried having my products array globally but it wasn't in sync with what was in the List below.
//var products = [];

var List = Vue.extend({
  template: '#product-list',
  name: 'List5',
  data: function() {
    return {
    }; 
  },
  mounted: function() {},
  computed: {
    productsL() {
      return store.state.productList
    }
  },
  methods: {
    /*
            getProducts: function() {
              this.$http.get('/api/Products').then((response) => {
                  //products = response.body; //Tried to update my global products array here.
                  this.products = response.body;
                  this.$emit('productsUpdated', this.products); //No luck here
                },
                function(response) {
                  //Error
                  console.log('No API here!');//response.body);
                });
            }*/
  }
});

var AddProduct = Vue.extend({
  template: '#add-product',
  data: function() {
    return {
      product: {
        name: '',
        description: '',
        price: '',
        quantity: ''
      }
    }
  },
  methods: {
    createProduct: function() {
      this.product;
      this.$store.commit('addProduct', {
          name: this.product.name,
          desc: this.product.description,
          prc: this.product.price,
          qty: this.product.quantity
        })
        /*
        this.$http.post('/api/Products', product).then(function(response) {
          },
          function(response) {
            //Error
            console.log(response.body);
          });*/
      router.push('/');
    }
  }
});

var router = new VueRouter({
  routes: [{
     ...