Vuetify Basic

by Yonathan Benitah

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/0.16.6/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/0.16.6/vuetify.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.3.4/vue-resource.js"></script>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet" type="text/css">

<div id="app">
  <v-app>
    <!-- <v-navigation-drawer v-model="drawer" disable-route-watcher persistent temporary :touchless="touchless"></v-navigation-drawer> -->
      <v-container fluid grid-list-md class="grey darken-1">
        <v-layout row wrap>
          <v-flex xs3 d-flex>
         <v-card>
             <!-- <v-card-text class="pa-1 pb-0"> -->
              <v-toolbar color="primary" dark v-if="!displaySearch">
                <v-btn icon @click="displaySearch = !displaySearch">
      <v-icon>search</v-icon>
    </v-btn>
            <v-toolbar-title>Projects</v-toolbar-title>
          </v-toolbar>
          <v-toolbar color="primary" dark v-else>
          
      <v-btn flat icon  @click="displaySearch = !displaySearch">
      <v-icon>arrow_back</v-icon>
    </v-btn>
            <v-text-field  autofocus="true"
                v-model="searchText"
                solo clearable prepend-icon="search" label="Search project"
                      :prepend-icon-cb="search"></v-text-field> 
                      </v-toolbar>
                      <!-- </v-card-text> --> 
                     <!--  class="pb-0 px-1 pt-1" -->
       <v-expansion-panel >
      <v-expansion-panel-content ripple v-for="item in filteredProjects " :key="item.id" >
        <div slot="header">{{item.name}}</div>
        <v-card>
         <!--  <v-card-text class="grey lighten-3" > -->
          ...

JavaScript

Vue.use(Vuetify);
Vue.use(VueResource);

/* Vue.http.options.root = '/'; */

/* Vue.http.headers.common['Authentication'] = '/'; */

const Foo = {
  template: '<div></div>'
}

const routes = [{
  path: '/',
  name: 'home',
  component: Foo
}]

const router = new VueRouter({
  routes
})

var vm = new Vue({
 el: "#app",
  router,
  data: () => ({
  displaySearch: false,
  activeTab: 'tab-0',
  layouts: [],
      projects: [],
      devices: [],
    drawer: false,
    touchless: false,
    searchText: '',
     lorem: `Lorem ipsum dolor sit amet, mel at clita quando. Te sit oratio vituperatoribus, nam ad ipsum posidonium mediocritatem, explicari dissentiunt cu mea. Repudiare disputationi vim in, mollis iriure nec cu, alienum argumentum ius ad. Pri eu justo aeque torquatos.`
  }),
 computed:{
   filteredProjects: function(){
  var self = this;
  return self.projects.filter(function(project){
  return project.name.toUpperCase().indexOf(self.searchText.toUpperCase()) !== -1;
  })
  }
  }, 
  methods: {
  loadDevices: function(layout){
 this.$devices.query({id: layout.id})
 
  .then((response) =>{
  console.log('success', response.body);
  this.devices = response.body;
  }, (error) =>{
  console.log('error', error);
  })
 },
  loadLayout: function(space){
  console.log('*******', this.activeTab);
  this.activeTab = 'tab-0';
  this.$http.get('https://jsonplaceholder.typicode.com/posts?userId='+space.id)
  .then((response) =>{
  console.log('success', response.body);
  this.layouts = response.body;
  }, (error) =>{
  console.log('error', error);
  })
  },
    onItemClicked: function() {
      console.log('click')
    },
     search: function () {
                console.debug('searching', this.searchText)
            },
            clearSearch: function () {
                this.searchParams = ''
            },
            checkKeyUp: function (event) {
                if (event.key === 'Enter') {
                    this.search()
                }
            },
         ...