Vuetify Basic

by David Marshall

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vuetify.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuetify.min.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 dark>
        <div id="a">
          <v-text-field class="monitorIdEdit" v-model="fake" label="Outside the table works fine"></v-text-field>
        </div>
        
        <v-data-table hide-actions
                      :headers="headers"
                      :items="people">

            <template slot="items" scope="props">
                <tr>
                  <td>{{ props.item.name }}</td>
                  <td>{{ props.item.number }}</td>
                  <td><v-text-field label="Works in body just fine"></v-text-field></td>
                </tr>
            </template>

          <template slot="footer">
            <tr>
              <td><v-text-field @keyup.enter="add" v-model="newName" label="Name"></v-text-field></td>
              <td><v-text-field @keyup.enter="add" v-model="newNumber" label="Number"></v-text-field></td>
              <td>This is the footer and the inputs aren't styled correctly</td>
            </tr>
          </template>

        </v-data-table>
        
        
        </v-app>
</div>

CSS

#a {
  width: 50%;
}

table {
  width: 50% !important;
}

JavaScript

Vue.use(Vuetify);

var vm = new Vue({
	el: "#app",
  methods: {
  	add(){
    	this.people.push({
      	name: this.newName,
        number: this.newNumber
      });
      
      this.newName = undefined;
      this.newNumber = undefined;
    }
  },
  data: {
  	fake: undefined,
  	newName: undefined,
    newNumber: undefined,
  	people: [
    	{ name: "Alpha", number: 1 }
    ],
  	headers: [
    	{ text: "Name", value: 'name' },
      { text: "Number", value: 'number' },
      { text: "Inputs", value: 'name' }
    ]
  }
});