Grid Example -Vue

Grid Example Vue

by DiscoverSDK

HTML

<div id="app">
    <fieldset>
            <h3>Add Resources</h3>
            
            <span >Description:</span>
            <input type="text" style="width:180px;" v-model="description" />
            <span > URL:</span>
            <input type="text" style="width:340px;" v-model="url" />
            <a class="btn" href="#" v-on:click="addResource">Add</a><br/>
            
        	<a href="#" v-on:click="showResource">Show</a>


            <h3>List of Resources</h3>
            <div>
            <table  border="1" style="width:740px;">
                <tbody> 
                <tr>
                    <th><h4>Description</h4></th>
                    <th><h4>URL</h4></th>
                    <th></th>
                </tr>
                <tr v-for="resource in resources">
                    <td><input style="width:200px;" type="text" v-model="resource.ResourceDescription"></td>
                    <td><input style="width:400px;" type="text" v-model="resource.ResourceAddress"></td>
                    <td><button v-on:click="removeResource($index)">Remove</button></td>
                </tr>
                </tbody>
            </table>
            </div>


    </fieldset>

</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<script src="app_vue.js"></script>

CSS

body
{
  font-family:Arial;
  color:#3a3a3a;
}
table
{
  border:none;
  text-align:left;
  margin-bottom:20px;
}
tr th
{
      background-color: #3b97d3;
    color: #fff;
    padding: 5px;
    border-right: solid 1px #3b97d3;
    border-left: solid 1px #fff;
}
tr th:first-child
{
  border-left: solid 1px #3b97d3;
}
tr td
{
  padding:5px;
   padding: 5px;
    border-right: solid 1px #d4d4d4;
}
tr td:first-child
{
  border-left: solid 1px #d4d4d4;
}
table tr:last-child td
{
  border-bottom: solid 1px #d4d4d4;
}
input[type="text"]
{
  height:20px;
  font-size:14px;
}
a.btn
{
  color:#fff;
  background-color:#3b97d3;
  padding:0px 10px;
   height:26px;
   display:inline-block;
    line-height:26px;
  text-decoration:none;
  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  cursor:pointer;
}
a.btn:hover
{
  background-color:#73c7ff;
}

JavaScript

var resources = [{'ResourceAddress': 'http://www.discoversdk.com', 'ResourceDescription':'Great site'}];

new Vue({
  el: '#app',
  data: {
  	description: '',
  	url: '',
  	resources: resources
  },
  methods: {
    addResource: function () {
      var description = this.description.trim();
      var url = this.url.trim();
      if (description && url) {
        this.resources.push({'ResourceAddress': url, 'ResourceDescription':description})
        this.description = '';
        this.url = '';
      }else{
      	return;
      }
    },
    removeResource: function (index) {
      this.resources.splice(index, 1)
    },
    showResource: function(){
    	alert(JSON.stringify(this.resources));
    }
  }
});